MoonshotAI Kimi K3.1 Pro – Science

via Moonshot AI · Generated

  • AIMAC Debt 4.64
  • Cost $0.52
  • Total Violations 16
  • HTML Size 139 KB
  • Em Dashes 7

Screenshot

View MoonshotAI Kimi K3.1 Pro Science page View Live Page

Accessibility Issues Found

16 Serious

  • color-contrast serious 16 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span>01</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Parallax Science Institute is an independent research organisation advancing living systems, planetary resilience, quantum matter and STEM education through open, rigorous science.">
  <meta name="theme-color" content="#0b292d">
  <meta property="og:title" content="Parallax Science Institute | A different angle on discovery">
  <meta property="og:description" content="Ambitious hypotheses. Open methods. Research that makes a measurable difference.">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://picsum.photos/seed/parallax-hero/1200/630">
  <title>Parallax Science Institute | A Different Angle on Discovery</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="icon" href="https://placehold.co/64x64/0B292D/D9FF73?text=P&font=montserrat">

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "ResearchOrganization",
    "name": "Parallax Science Institute",
    "slogan": "A different angle on discovery.",
    "url": "https://www.parallaxscience.org/",
    "email": "hello@parallaxscience.org",
    "telephone": "+44-1223-555-0148",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "84 Meridian Quay",
      "addressLocality": "Cambridge",
      "postalCode": "CB2 1TN",
      "addressCountry": "GB"
    }
  }
  </script>

  <style>
    :root {
      color-scheme: light;
      --ink: #102d31;
      --ink-deep: #082327;
      --ink-soft: #29464a;
      --paper: #f5f5ef;
      --white: #ffffff;
      --mist: #e8eee7;
      --line: #d4ddd4;
      --muted: #607276;
      --acid: #d9ff73;
      --acid-soft: #efffc7;
      --aqua: #63dbc9;
      --coral: #ff745f;
      --serif: "Instrument Serif", Georgia, serif;
      --sans: "Manrope", Arial, sans-serif;
      --shadow: 0 24px 70px rgba(8, 35, 39, 0.10);
      --radius: 20px;
      --container: 1280px;
    }

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

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

    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    body.menu-open {
      overflow: hidden;
    }

    ::selection {
      background: var(--acid);
      color: var(--ink-deep);
    }

    h1, h2, h3, h4, p, figure, blockquote {
      margin-top: 0;
    }

    h1, h2, h3 {
      text-wrap: balance;
    }

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

    h2 {
      margin-bottom: 24px;
      font-size: clamp(3rem, 5vw, 5.25rem);
    }

    h3 {
      line-height: 1.2;
      letter-spacing: -0.025em;
    }

    p {
      margin-bottom: 20px;
    }

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

    button, input, select {
      font: inherit;
    }

    button, select {
      cursor: pointer;
    }

    button {
      color: inherit;
    }

    img {
      display: block;
      max-width: 100%;
      background: var(--mist);
    }

    svg {
      display: block;
    }

    :focus-visible {
      outline: 3px solid var(--coral);
      outline-offset: 4px;
    }

    section[id] {
      scroll-margin-top: 100px;
    }

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

    .section {
      padding: 112px 0;
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 1000;
      padding: 12px 18px;
      transform: translateY(-150%);
      border-radius: 6px;
      background: var(--acid);
      color: var(--ink);
      font-weight: 800;
      transition: transform 180ms ease;
    }

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

    .reading-progress {
      position: fixed;
      inset: 0 0 auto;
      z-index: 200;
      height: 3px;
      transform: scaleX(0);
      transform-origin: left;
      background: var(--coral);
      pointer-events: none;
    }

    .announcement {
      background: var(--ink-deep);
      color: #e9f1ec;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .announcement-inner {
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .announcement-message {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
    }

    .announcement-message::before {
      content: "";
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--acid);
      box-shadow: 0 0 0 5px rgba(217, 255, 115, 0.10);
    }

    .announcement a {
      color: var(--acid);
      font-weight: 800;
    }

    .announcement a:hover {
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid rgba(16, 45, 49, 0.10);
      background: rgba(245, 245, 239, 0.94);
      backdrop-filter: blur(18px);
      transition: box-shadow 200ms ease, background 200ms ease;
    }

    .site-header.is-scrolled {
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 10px 35px rgba(8, 35, 39, 0.08);
    }

    .navbar {
      position: relative;
      min-height: 84px;
      display: flex;
      align-items: center;
      gap: 30px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 12px;
    }

    .brand-logo {
      width: 46px;
      height: 46px;
      border-radius: 12px;
    }

    .brand-copy {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .brand-name {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .brand-name span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 8px;
      letter-spacing: 0.24em;
    }

    .brand-tagline {
      margin-top: 5px;
      color: var(--muted);
      font-family: var(--serif);
      font-size: 13px;
      font-style: italic;
      letter-spacing: 0;
      text-transform: none;
    }

    .primary-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(16px, 1.8vw, 28px);
      margin-left: auto;
    }

    .primary-nav a {
      position: relative;
      padding: 10px 0;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .primary-nav a::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 4px;
      left: 0;
      height: 2px;
      transform: scaleX(0);
      transform-origin: right;
      background: var(--ink);
      transition: transform 180ms ease;
    }

    .primary-nav a:hover::after,
    .primary-nav a:focus-visible::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    .header-action {
      flex: 0 0 auto;
    }

    .nav-toggle {
      display: none;
      width: 46px;
      height: 46px;
      margin-left: auto;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
    }

    .nav-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      margin: 4px auto;
      background: var(--ink);
      transition: transform 180ms ease, opacity 180ms ease;
    }

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

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

    .button {
      display: inline-flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 13px 22px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.2;
      transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
    }

    .button::after {
      content: "↗";
      font-size: 17px;
      font-weight: 500;
      line-height: 1;
    }

    .button:hover {
      transform: translateY(-2px);
    }

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

    .button-dark:hover {
      background: #19464b;
    }

    .button-acid {
      background: var(--acid);
      color: var(--ink-deep);
    }

    .button-acid:hover {
      background: #e5ff9d;
    }

    .button-outline {
      border-color: var(--ink);
      background: transparent;
      color: var(--ink);
    }

    .button-outline:hover {
      background: var(--ink);
      color: var(--white);
    }

    .button-light-outline {
      border-color: rgba(255, 255, 255, 0.35);
      color: var(--white);
    }

    .button-light-outline:hover {
      border-color: var(--acid);
      color: var(--acid);
    }

    .button-small {
      min-height: 40px;
      padding: 10px 15px;
      font-size: 11px;
    }

    .button-small::after {
      display: none;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 0;
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }

    .text-link::after {
      content: "→";
      font-size: 18px;
      font-weight: 400;
      transition: transform 180ms ease;
    }

    .text-link:hover::after {
      transform: translateX(5px);
    }

    .text-link:hover {
      text-decoration: underline;
      text-underline-offset: 5px;
    }

    .section-kicker {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

    .section-kicker::before {
      content: "";
      width: 28px;
      height: 1px;
      background: currentColor;
    }

    .section-kicker.light {
      color: var(--aqua);
    }

    .section-heading {
      margin-bottom: 56px;
    }

    .split-heading {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
      align-items: end;
      gap: 80px;
    }

    .split-heading h2 {
      margin-bottom: 0;
    }

    .split-heading p {
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 16px;
    }

    .hero {
      position: relative;
      padding: 76px 0 60px;
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      opacity: 0.4;
      background-image:
        linear-gradient(rgba(16, 45, 49, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 45, 49, 0.055) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(to right, black, transparent 78%);
    }

    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 650px;
      height: 650px;
      top: -250px;
      left: -260px;
      border: 1px solid rgba(16, 45, 49, 0.09);
      border-radius: 50%;
      box-shadow: 0 0 0 90px rgba(16, 45, 49, 0.025), 0 0 0 180px rgba(16, 45, 49, 0.018);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
      align-items: center;
      gap: clamp(60px, 7vw, 110px);
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.5);
      color: var(--ink-soft);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .hero-eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--coral);
    }

    .hero h1 {
      max-width: 790px;
      margin-bottom: 30px;
      font-size: clamp(4.25rem, 6.4vw, 6.7rem);
    }

    .hero h1 em {
      color: #2d665f;
      font-weight: 400;
    }

    .hero-intro {
      max-width: 650px;
      color: var(--ink-soft);
      font-size: 17px;
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 34px 0 48px;
    }

    .hero-stats {
      display: grid;
      max-width: 660px;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
    }

    .hero-stat {
      padding: 22px 22px 0 0;
    }

    .hero-stat + .hero-stat {
      padding-left: 22px;
      border-left: 1px solid var(--line);
    }

    .hero-stat strong {
      display: block;
      margin-bottom: 3px;
      font-family: var(--serif);
      font-size: 37px;
      font-weight: 400;
      line-height: 1;
    }

    .hero-stat span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .hero-visual {
      position: relative;
      margin: 0;
      padding: 0 0 44px 22px;
    }

    .hero-image-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 0.87;
      border-radius: 4px 4px 70px 4px;
      background: var(--ink);
      box-shadow: var(--shadow);
    }

    .hero-image-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(8, 35, 39, 0.04), rgba(8, 35, 39, 0.45));
      pointer-events: none;
    }

    .hero-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.87;
      filter: sepia(0.15) hue-rotate(105deg) saturate(0.8);
    }

    .observation-card {
      position: absolute;
      z-index: 2;
      top: 28px;
      right: -22px;
      min-width: 210px;
      padding: 16px 18px;
      border: 1px solid rgba(255, 255, 255, 0.55);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 16px 40px rgba(8, 35, 39, 0.15);
      backdrop-filter: blur(12px);
    }

    .observation-label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .observation-label::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--coral);
      animation: pulse 2s infinite;
    }

    .observation-card strong {
      display: block;
      margin-top: 8px;
      font-size: 14px;
    }

    .observation-card small {
      color: var(--muted);
      font-size: 10px;
    }

    .data-card {
      position: absolute;
      z-index: 3;
      bottom: 76px;
      left: -32px;
      width: min(290px, 70%);
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 14px;
      background: rgba(8, 35, 39, 0.94);
      color: var(--white);
      box-shadow: 0 20px 45px rgba(8, 35, 39, 0.25);
      backdrop-filter: blur(12px);
    }

    .data-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 10px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .data-card-header span:last-child {
      color: var(--acid);
    }

    .data-card svg {
      width: 100%;
      height: auto;
    }

    .data-card-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      color: #a8bcba;
      font-size: 9px;
    }

    .hero-visual figcaption {
      position: absolute;
      right: 0;
      bottom: 0;
      max-width: 420px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.5;
      text-align: right;
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 116, 95, 0.4); }
      50% { box-shadow: 0 0 0 7px rgba(255, 116, 95, 0); }
    }

    .discipline-strip {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.35);
    }

    .discipline-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .discipline-list li {
      display: flex;
      min-height: 76px;
      align-items: center;
      gap: 13px;
      padding: 16px 20px;
      color: var(--ink-soft);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .discipline-list li + li {
      border-left: 1px solid var(--line);
    }

    .discipline-list span {
      color: #8a9999;
      font-family: var(--serif);
      font-size: 17px;
      font-weight: 400;
    }

    .spotlight {
      background: var(--paper);
    }

    .spotlight-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(330px, 0.8fr);
      align-items: start;
      gap: 28px;
    }

    .lead-story {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
    }

    .story-image {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 8.6;
      background: var(--ink);
    }

    .story-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 600ms ease;
    }

    .lead-story:hover .story-image img {
      transform: scale(1.025);
    }

    .story-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(8, 35, 39, 0.42));
    }

    .image-index {
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 20px;
      padding: 8px 11px;
      border-radius: 5px;
      background: var(--acid);
      color: var(--ink);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .story-content {
      padding: clamp(26px, 4vw, 46px);
    }

    .story-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 18px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .story-meta .category {
      color: #2b6b62;
    }

    .lead-story h3 {
      max-width: 740px;
      margin-bottom: 22px;
      font-family: var(--serif);
      font-size: clamp(2.25rem, 3.6vw, 3.75rem);
      font-weight: 400;
      line-height: 1.02;
    }

    .story-content p {
      color: var(--ink-soft);
      font-size: 15px;
    }

    .method-note {
      display: flex;
      gap: 14px;
      margin: 26px 0;
      padding: 17px 19px;
      border-left: 3px solid var(--aqua);
      background: #f0f5f1;
      color: var(--ink-soft);
      font-size: 12px;
    }

    .method-note strong {
      flex: 0 0 auto;
      color: var(--ink);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .byline {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 28px 0;
    }

    .byline img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
    }

    .byline-copy {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      line-height: 1.5;
    }

    .byline-copy span {
      color: var(--muted);
      font-size: 10px;
    }

    .story-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
    }

    .discovery-sidebar {
      padding: 4px 0 0;
    }

    .sidebar-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
      padding: 0 3px 16px;
      border-bottom: 1px solid var(--line);
    }

    .sidebar-heading h3 {
      margin: 0;
      font-size: 14px;
      letter-spacing: 0;
    }

    .sidebar-heading span {
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .dispatch-card {
      display: grid;
      grid-template-columns: 122px minmax(0, 1fr);
      gap: 20px;
      padding: 22px 0;
      border-bottom: 1px solid var(--line);
    }

    .dispatch-card img {
      width: 122px;
      height: 100%;
      min-height: 160px;
      border-radius: 10px;
      object-fit: cover;
    }

    .dispatch-card .story-meta {
      margin-bottom: 10px;
      font-size: 8px;
    }

    .dispatch-card h4 {
      margin: 0 0 10px;
      font-family: var(--serif);
      font-size: 25px;
      font-weight: 400;
      line-height: 1.08;
    }

    .dispatch-card p {
      margin-bottom: 14px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.65;
    }

    .dispatch-card .text-link {
      font-size: 10px;
    }

    .research-section {
      position: relative;
      overflow: hidden;
      background: var(--ink-deep);
      color: var(--white);
    }

    .research-section::before {
      content: "";
      position: absolute;
      top: -240px;
      right: -200px;
      width: 620px;
      height: 620px;
      border: 1px solid rgba(99, 219, 201, 0.12);
      border-radius: 50%;
      box-shadow: 0 0 0 80px rgba(99, 219, 201, 0.025), 0 0 0 160px rgba(99, 219, 201, 0.018);
    }

    .research-section .section-heading {
      position: relative;
    }

    .research-section .split-heading p {
      color: #a9bfbd;
    }

    .research-section h2 em {
      color: var(--acid);
      font-weight: 400;
    }

    .lab-layout {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 26px;
    }

    .lab-feature {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--radius);
      background: #103438;
    }

    .lab-image {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 9.2;
    }

    .lab-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.8;
      filter: sepia(0.2) hue-rotate(100deg);
    }

    .lab-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent, rgba(8, 35, 39, 0.4));
    }

    .live-pill {
      position: absolute;
      z-index: 2;
      top: 18px;
      left: 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border-radius: 100px;
      background: rgba(8, 35, 39, 0.8);
      color: var(--white);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
    }

    .live-pill::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--acid);
    }

    .lab-content {
      padding: 32px;
    }

    .lab-label {
      margin-bottom: 12px;
      color: var(--aqua);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .lab-content h3 {
      margin-bottom: 17px;
      font-family: var(--serif);
      font-size: 38px;
      font-weight: 400;
    }

    .lab-content p {
      color: #b7c9c7;
      font-size: 13px;
    }

    .lab-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 22px 0 26px;
      padding: 0;
      list-style: none;
    }

    .lab-specs li {
      padding: 7px 10px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 5px;
      color: #d5e3e0;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .lab-content .text-link {
      color: var(--acid);
    }

    .program-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .program-card {
      display: flex;
      min-height: 310px;
      flex-direction: column;
      padding: 27px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.025);
      transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
    }

    .program-card:hover {
      transform: translateY(-5px);
      border-color: rgba(217, 255, 115, 0.55);
      background: rgba(255, 255, 255, 0.055);
    }

    .program-number {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;
      color: var(--aqua);
      font-family: var(--serif);
      font-size: 20px;
    }

    .program-number::after {
      content: "+";
      font-family: var(--sans);
      font-size: 18px;
      font-weight: 400;
    }

    .program-card h3 {
      margin-bottom: 13px;
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 400;
    }

    .program-card p {
      margin-bottom: 25px;
      color: #a9bfbd;
      font-size: 12px;
      line-height: 1.7;
    }

    .program-card .text-link {
      margin-top: auto;
      color: var(--white);
      font-size: 10px;
    }

    .facility-ribbon {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 34px;
      border-top: 1px solid rgba(255, 255, 255, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .facility-stat {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 24px 28px;
    }

    .facility-stat + .facility-stat {
      border-left: 1px solid rgba(255, 255, 255, 0.15);
    }

    .facility-stat strong {
      color: var(--acid);
      font-family: var(--serif);
      font-size: 36px;
      font-weight: 400;
      line-height: 1;
    }

    .facility-stat span {
      color: #afc3c0;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .publications {
      background: #eef1eb;
    }

    .publication-summary {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.55);
    }

    .publication-summary strong {
      display: block;
      margin-bottom: 6px;
      font-family: var(--serif);
      font-size: 31px;
      font-weight: 400;
    }

    .publication-summary p {
      margin: 0;
      font-size: 12px;
    }

    .citation-tool {
      overflow: hidden;
      border: 1px solid #cbd6cd;
      border-radius: 22px;
      background: var(--white);
      box-shadow: var(--shadow);
    }

    .tool-header {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 28px 32px;
      border-bottom: 1px solid var(--line);
      background: var(--ink);
      color: var(--white);
    }

    .tool-icon {
      display: grid;
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 12px;
      background: var(--acid);
      color: var(--ink);
    }

    .tool-header h3 {
      margin: 0 0 4px;
      font-size: 19px;
    }

    .tool-header p {
      margin: 0;
      color: #b5c8c5;
      font-size: 11px;
    }

    .tool-controls {
      padding: 30px 32px 24px;
      border-bottom: 1px solid var(--line);
      background: #fbfcf9;
    }

    .citation-form {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) 185px 185px;
      gap: 16px;
    }

    .field label {
      display: block;
      margin-bottom: 8px;
      color: var(--ink-soft);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .field input,
    .field select {
      width: 100%;
      height: 52px;
      border: 1px solid #c9d4cb;
      border-radius: 8px;
      background: var(--white);
      color: var(--ink);
      font-size: 13px;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    .field input {
      padding: 0 16px 0 44px;
    }

    .field select {
      padding: 0 13px;
    }

    .field input:focus,
    .field select:focus {
      border-color: #4f8d82;
      outline: none;
      box-shadow: 0 0 0 4px rgba(99, 219, 201, 0.18);
    }

    .input-wrap {
      position: relative;
    }

    .input-wrap svg {
      position: absolute;
      top: 17px;
      left: 16px;
      color: var(--muted);
      pointer-events: none;
    }

    .quick-searches {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
    }

    .quick-searches > span {
      margin-right: 4px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .search-chip {
      padding: 7px 11px;
      border: 1px solid var(--line);
      border-radius: 100px;
      background: transparent;
      color: var(--ink-soft);
      font-size: 10px;
      font-weight: 700;
      transition: background 160ms ease, border-color 160ms ease;
    }

    .search-chip:hover,
    .search-chip[aria-pressed="true"] {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--white);
    }

    .results-panel {
      padding: 28px 32px 34px;
    }

    .results-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 18px;
    }

    .results-meta p {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .results-meta span {
      color: var(--muted);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .publication-result {
      padding: 28px 0;
      border-top: 1px solid var(--line);
    }

    .publication-result:first-child {
      padding-top: 8px;
      border-top: 0;
    }

    .pub-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
    }

    .pub-discipline {
      display: block;
      margin-bottom: 8px;
      color: #367269;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .publication-result h4 {
      max-width: 840px;
      margin: 0 0 9px;
      font-family: var(--serif);
      font-size: 29px;
      font-weight: 400;
      line-height: 1.12;
    }

    .pub-authors {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
    }

    .pub-year {
      align-self: start;
      padding: 7px 10px;
      border-radius: 5px;
      background: var(--mist);
      color: var(--ink-soft);
      font-size: 10px;
      font-weight: 800;
    }

    .citation-box {
      margin: 20px 0 16px;
      padding: 18px 20px;
      border: 1px solid #dbe2da;
      border-radius: 9px;
      background: #f5f7f2;
    }

    .citation-label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .citation-text {
      margin: 0;
      color: var(--ink-soft);
      font-family: var(--sans);
      font-size: 11px;
      line-height: 1.75;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .pub-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 16px;
    }

    .pub-actions .text-link {
      margin-left: auto;
      font-size: 10px;
    }

    .abstract {
      margin-top: 18px;
      border-top: 1px dashed var(--line);
    }

    .abstract summary {
      padding-top: 15px;
      color: var(--ink-soft);
      cursor: pointer;
      font-size: 10px;
      font-weight: 800;
      list-style: none;
    }

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

    .abstract summary::before {
      content: "+";
      display: inline-block;
      width: 20px;
      color: #39786d;
      font-size: 16px;
    }

    .abstract[open] summary::before {
      content: "−";
    }

    .abstract p {
      max-width: 900px;
      margin: 12px 0 0 20px;
      color: var(--muted);
      font-size: 12px;
    }

    .show-all-wrap {
      padding-top: 12px;
      text-align: center;
    }

    .show-all-wrap[hidden] {
      display: none;
    }

    .no-results {
      padding: 46px 20px;
      text-align: center;
    }

    .no-results h4 {
      margin-bottom: 8px;
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 400;
    }

    .no-results p {
      color: var(--muted);
      font-size: 13px;
    }

    .index-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-top: 24px;
      color: var(--muted);
      font-size: 11px;
    }

    .index-note p {
      margin: 0;
    }

    .index-note a {
      flex: 0 0 auto;
      color: var(--ink);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .education {
      background: var(--paper);
    }

    .education-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
      align-items: center;
      gap: clamp(55px, 8vw, 110px);
      margin-bottom: 72px;
    }

    .education-intro h2 {
      max-width: 760px;
    }

    .education-intro p {
      max-width: 700px;
      color: var(--ink-soft);
    }

    .education-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .education-metric {
      padding: 12px 15px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
      font-size: 10px;
      font-weight: 700;
    }

    .education-metric strong {
      margin-right: 5px;
      color: #39766c;
      font-family: var(--serif);
      font-size: 23px;
      font-weight: 400;
    }

    .education-photo {
      position: relative;
      margin: 0;
    }

    .education-photo img {
      width: 100%;
      aspect-ratio: 4 / 4.2;
      border-radius: 50% 50% 16px 16px;
      object-fit: cover;
      filter: saturate(0.75);
    }

    .education-photo figcaption {
      position: absolute;
      right: -22px;
      bottom: 24px;
      max-width: 230px;
      padding: 19px;
      border-radius: 12px;
      background: var(--acid);
      color: var(--ink);
      box-shadow: var(--shadow);
      font-size: 11px;
      font-weight: 700;
    }

    .education-photo figcaption strong {
      display: block;
      margin-bottom: 3px;
      font-family: var(--serif);
      font-size: 29px;
      font-weight: 400;
    }

    .resource-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 26px;
    }

    .resource-heading h3 {
      margin: 0;
      font-family: var(--serif);
      font-size: 38px;
      font-weight: 400;
    }

    .resource-heading p {
      max-width: 440px;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .resource-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .resource-card {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--white);
      transition: transform 200ms ease, box-shadow 200ms ease;
    }

    .resource-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
    }

    .resource-image {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 9.6;
    }

    .resource-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 400ms ease;
    }

    .resource-card:hover .resource-image img {
      transform: scale(1.035);
    }

    .resource-number {
      position: absolute;
      right: 14px;
      bottom: 12px;
      color: var(--ink);
      font-family: var(--serif);
      font-size: 29px;
      line-height: 1;
    }

    .resource-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 26px;
    }

    .resource-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 16px;
    }

    .resource-tags span {
      padding: 5px 8px;
      border-radius: 4px;
      background: var(--mist);
      color: var(--ink-soft);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .resource-card h4 {
      margin: 0 0 13px;
      font-family: var(--serif);
      font-size: 31px;
      font-weight: 400;
      line-height: 1.08;
    }

    .resource-card p {
      color: var(--muted);
      font-size: 12px;
    }

    .resource-card .text-link {
      align-self: flex-start;
      margin-top: auto;
      padding-top: 10px;
    }

    .teacher-quote {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 40px;
      margin-top: 28px;
      padding: 34px 38px;
      border-radius: 16px;
      background: var(--mist);
    }

    .teacher-quote blockquote {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(1.7rem, 2.6vw, 2.35rem);
      line-height: 1.16;
    }

    .quote-person {
      display: flex;
      min-width: 220px;
      align-items: center;
      gap: 13px;
    }

    .quote-person img {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      object-fit: cover;
    }

    .quote-person strong,
    .quote-person span {
      display: block;
    }

    .quote-person strong {
      font-size: 11px;
    }

    .quote-person span {
      max-width: 160px;
      margin-top: 3px;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.5;
    }

    .about {
      border-top: 1px solid var(--line);
      background: var(--white);
    }

    .about-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
      gap: 90px;
      margin-bottom: 58px;
    }

    .about-intro h2 {
      max-width: 790px;
    }

    .about-copy {
      padding-top: 38px;
    }

    .about-copy p {
      color: var(--ink-soft);
      font-size: 15px;
    }

    .principle-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-bottom: 76px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .principle {
      padding: 32px;
    }

    .principle + .principle {
      border-left: 1px solid var(--line);
    }

    .principle-number {
      display: block;
      margin-bottom: 28px;
      color: #488379;
      font-family: var(--serif);
      font-size: 22px;
    }

    .principle h3 {
      margin-bottom: 12px;
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 400;
    }

    .principle p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .voices-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 26px;
    }

    .voices-heading h3 {
      margin: 0;
      font-family: var(--serif);
      font-size: 40px;
      font-weight: 400;
    }

    .voices-heading p {
      max-width: 430px;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .quote-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 90px;
    }

    .testimonial-card {
      display: flex;
      min-height: 310px;
      flex-direction: column;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fafbf8;
    }

    .quote-mark {
      color: #57998c;
      font-family: var(--serif);
      font-size: 55px;
      line-height: 0.8;
    }

    .testimonial-card blockquote {
      margin: 22px 0 28px;
      color: var(--ink-soft);
      font-family: var(--serif);
      font-size: 24px;
      line-height: 1.25;
    }

    .testimonial-card .quote-person {
      min-width: 0;
      margin-top: auto;
    }

    .testimonial-card .quote-person img {
      width: 44px;
      height: 44px;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1fr);
      gap: 80px;
      padding-top: 60px;
      border-top: 1px solid var(--line);
    }

    .faq-intro h3 {
      margin-bottom: 18px;
      font-family: var(--serif);
      font-size: 43px;
      font-weight: 400;
    }

    .faq-intro p {
      color: var(--muted);
      font-size: 13px;
    }

    .faq-list details {
      border-bottom: 1px solid var(--line);
    }

    .faq-list details:first-child {
      border-top: 1px solid var(--line);
    }

    .faq-list summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
      padding: 24px 0;
      cursor: pointer;
      font-size: 14px;
      font-weight: 800;
      list-style: none;
    }

    .faq-list summary::-webkit-details-marker {
      display: none;
    }

    .faq-icon {
      display: grid;
      width: 30px;
      height: 30px;
      flex: 0 0 auto;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      font-size: 19px;
      font-weight: 400;
      transition: transform 180ms ease, background 180ms ease;
    }

    .faq-list details[open] .faq-icon {
      transform: rotate(45deg);
      background: var(--acid);
    }

    .faq-answer {
      max-width: 690px;
      padding: 0 50px 24px 0;
      color: var(--muted);
      font-size: 13px;
    }

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

    .events {
      background: #eef1eb;
    }

    .events-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.65fr);
      align-items: start;
      gap: 28px;
    }

    .events-list {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--white);
    }

    .event-card {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 28px;
      padding: 30px;
    }

    .event-card + .event-card {
      border-top: 1px solid var(--line);
    }

    .event-date {
      display: flex;
      height: 92px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--ink);
      color: var(--white);
      line-height: 1;
    }

    .event-date span {
      margin-bottom: 8px;
      color: var(--acid);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.13em;
    }

    .event-date strong {
      font-family: var(--serif);
      font-size: 39px;
      font-weight: 400;
    }

    .event-type {
      display: block;
      margin-bottom: 8px;
      color: #3e796f;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .event-card h3 {
      margin-bottom: 11px;
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 400;
    }

    .event-card p {
      margin-bottom: 15px;
      color: var(--muted);
      font-size: 12px;
    }

    .event-details {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 20px;
    }

    .event-details span {
      color: var(--ink-soft);
      font-size: 9px;
      font-weight: 700;
    }

    .event-details .text-link {
      margin-left: auto;
      font-size: 10px;
    }

    .noticeboard {
      overflow: hidden;
      border-radius: 16px;
      background: var(--ink);
      color: var(--white);
    }

    .noticeboard-section {
      padding: 30px;
    }

    .noticeboard-section + .noticeboard-section {
      border-top: 1px solid rgba(255, 255, 255, 0.14);
    }

    .noticeboard-label {
      display: block;
      margin-bottom: 8px;
      color: var(--aqua);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .noticeboard h3 {
      margin-bottom: 22px;
      font-family: var(--serif);
      font-size: 34px;
      font-weight: 400;
    }

    .deadline {
      padding: 17px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.13);
    }

    .deadline-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 6px;
    }

    .deadline-top strong {
      font-size: 11px;
    }

    .deadline-top span {
      color: var(--acid);
      font-size: 9px;
      font-weight: 800;
      white-space: nowrap;
    }

    .deadline p {
      margin: 0;
      color: #a9bfbd;
      font-size: 10px;
    }

    .deadline a {
      display: inline-block;
      margin-top: 9px;
      color: var(--white);
      font-size: 9px;
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .noticeboard-footnote {
      margin: 16px 0 0;
      color: #829d9a;
      font-size: 9px;
    }

    .scientist-profile {
      text-align: left;
    }

    .scientist-heading {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 18px;
    }

    .scientist-heading img {
      width: 68px;
      height: 68px;
      border: 2px solid var(--acid);
      border-radius: 50%;
      object-fit: cover;
    }

    .scientist-heading h4 {
      margin: 0 0 4px;
      font-family: var(--serif);
      font-size: 25px;
      font-weight: 400;
    }

    .scientist-heading span {
      color: #a9bfbd;
      font-size: 9px;
    }

    .scientist-profile blockquote {
      margin-bottom: 18px;
      color: #d3e0dd;
      font-family: var(--serif);
      font-size: 21px;
      line-height: 1.3;
    }

    .scientist-profile .text-link {
      color: var(--acid);
      font-size: 10px;
    }

    .careers {
      background: var(--paper);
    }

    .careers-shell {
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
      border-radius: 24px;
      background: var(--acid);
    }

    .careers-content {
      padding: clamp(34px, 5vw, 68px);
    }

    .careers .section-kicker {
      color: #496040;
    }

    .careers h2 {
      max-width: 700px;
      font-size: clamp(3rem, 4.7vw, 4.8rem);
    }

    .careers-content > p {
      max-width: 670px;
      color: #334b3b;
      font-size: 14px;
    }

    .career-benefits {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 26px 0 30px;
    }

    .career-benefits span {
      padding: 7px 10px;
      border: 1px solid rgba(16, 45, 49, 0.25);
      border-radius: 100px;
      font-size: 9px;
      font-weight: 800;
    }

    .role-list {
      margin: 30px 0;
      border-top: 1px solid rgba(16, 45, 49, 0.25);
    }

    .role-link {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
      gap: 22px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(16, 45, 49, 0.25);
      font-size: 11px;
    }

    .role-link strong {
      font-size: 12px;
    }

    .role-link span {
      color: #435a45;
      font-size: 9px;
    }

    .role-link::after {
      content: "↗";
      font-size: 18px;
      transition: transform 180ms ease;
    }

    .role-link:hover::after {
      transform: translate(3px, -3px);
    }

    .careers-image {
      position: relative;
      min-height: 100%;
    }

    .careers-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(1) contrast(1.05);
      mix-blend-mode: multiply;
      opacity: 0.82;
    }

    .careers-image::after {
      content: "03 featured roles\A Cambridge · London · Remote";
      position: absolute;
      right: 24px;
      bottom: 24px;
      left: 24px;
      padding: 20px;
      border-radius: 10px;
      background: rgba(8, 35, 39, 0.9);
      color: var(--white);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.8;
      white-space: pre-wrap;
      backdrop-filter: blur(10px);
    }

    .newsletter {
      padding: 0 0 90px;
      background: var(--paper);
    }

    .newsletter-shell {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(400px, 0.75fr);
      align-items: center;
      gap: 70px;
      padding: clamp(38px, 6vw, 74px);
      border-radius: 24px;
      background: var(--ink-deep);
      color: var(--white);
    }

    .newsletter-shell::after {
      content: "";
      position: absolute;
      right: -170px;
      bottom: -270px;
      width: 510px;
      height: 510px;
      border: 1px solid rgba(217, 255, 115, 0.17);
      border-radius: 50%;
      box-shadow: 0 0 0 55px rgba(217, 255, 115, 0.025), 0 0 0 110px rgba(217, 255, 115, 0.02);
      pointer-events: none;
    }

    .newsletter-copy,
    .newsletter-form {
      position: relative;
      z-index: 1;
    }

    .newsletter h2 {
      margin-bottom: 18px;
      font-size: clamp(3rem, 4.7vw, 4.7rem);
    }

    .newsletter-copy p {
      max-width: 550px;
      margin: 0;
      color: #b1c5c2;
      font-size: 13px;
    }

    .newsletter-fields {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
    }

    .newsletter-form label {
      display: block;
      margin-bottom: 8px;
      color: #c8d8d5;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .newsletter-email input {
      width: 100%;
      height: 54px;
      padding: 0 16px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.07);
      color: var(--white);
      font-size: 12px;
    }

    .newsletter-email input::placeholder {
      color: #8da6a2;
    }

    .newsletter-email input:focus {
      border-color: var(--acid);
      outline: none;
      box-shadow: 0 0 0 4px rgba(217, 255, 115, 0.12);
    }

    .newsletter-submit {
      align-self: end;
      height: 54px;
    }

    .newsletter-preference {
      margin-top: 16px;
    }

    .newsletter-preference select {
      width: 100%;
      height: 46px;
      padding: 0 13px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      background: #15393d;
      color: var(--white);
      font-size: 11px;
    }

    .newsletter-note {
      margin: 13px 0 0;
      color: #829e9a;
      font-size: 9px;
    }

    .newsletter-note a {
      color: #bfd2ce;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .form-status {
      min-height: 22px;
      margin: 10px 0 0;
      color: var(--acid);
      font-size: 11px;
      font-weight: 700;
    }

    .site-footer {
      background: var(--ink-deep);
      color: var(--white);
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.55fr 0.7fr 0.8fr 1.1fr;
      gap: 60px;
      padding: 70px 0 56px;
    }

    .footer-brand .brand {
      margin-bottom: 22px;
    }

    .footer-brand .brand-name span,
    .footer-brand .brand-tagline {
      color: #94adaa;
    }

    .footer-brand p {
      max-width: 350px;
      color: #9db4b1;
      font-size: 12px;
    }

    .footer-socials {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 24px;
    }

    .footer-socials a {
      padding: 8px 11px;
      border: 1px solid rgba(255, 255, 255, 0.17);
      border-radius: 5px;
      color: #d8e4e1;
      font-size: 9px;
      font-weight: 700;
      transition: border-color 160ms ease, color 160ms ease;
    }

    .footer-socials a:hover {
      border-color: var(--acid);
      color: var(--acid);
    }

    .footer-column h3 {
      margin-bottom: 20px;
      color: var(--aqua);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

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

    .footer-links li + li {
      margin-top: 11px;
    }

    .footer-links a {
      color: #c0d0cd;
      font-size: 11px;
    }

    .footer-links a:hover {
      color: var(--acid);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .footer-contact {
      color: #c0d0cd;
      font-size: 11px;
      font-style: normal;
    }

    .footer-contact p {
      margin-bottom: 14px;
    }

    .footer-contact a {
      display: block;
      margin-bottom: 7px;
      overflow-wrap: anywhere;
    }

    .footer-contact a:hover {
      color: var(--acid);
    }

    .footer-bottom {
      display: flex;
      min-height: 74px;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      color: #829d99;
      font-size: 9px;
    }

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

    .footer-legal a:hover {
      color: var(--white);
    }

    .toast {
      position: fixed;
      z-index: 500;
      bottom: 24px;
      left: 50%;
      max-width: calc(100% - 32px);
      padding: 13px 19px;
      transform: translate(-50%, 25px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      background: var(--ink-deep);
      color: var(--white);
      box-shadow: 0 15px 45px rgba(8, 35, 39, 0.3);
      font-size: 11px;
      font-weight: 700;
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .toast.is-visible {
      transform: translate(-50%, 0);
      opacity: 1;
    }

    .legal-dialog {
      width: min(650px, calc(100% - 32px));
      max-height: min(720px, calc(100vh - 48px));
      padding: 0;
      border: 0;
      border-radius: 18px;
      background: var(--white);
      color: var(--ink);
      box-shadow: 0 30px 100px rgba(8, 35, 39, 0.35);
    }

    .legal-dialog::backdrop {
      background: rgba(8, 35, 39, 0.7);
      backdrop-filter: blur(5px);
    }

    .dialog-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 24px 28px;
      border-bottom: 1px solid var(--line);
    }

    .dialog-header h2 {
      margin: 0;
      font-family: var(--serif);
      font-size: 36px;
    }

    .dialog-close {
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      padding: 0;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: transparent;
      font-size: 24px;
      line-height: 1;
    }

    .dialog-body {
      padding: 26px 28px 32px;
      color: var(--ink-soft);
      font-size: 13px;
    }

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

    .js .reveal {
      transform: translateY(24px);
      opacity: 0;
      transition: opacity 650ms ease, transform 650ms ease;
    }

    .js .reveal.is-visible {
      transform: translateY(0);
      opacity: 1;
    }

    @media (max-width: 1160px) {
      .primary-nav {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--white);
        box-shadow: var(--shadow);
      }

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

      .primary-nav a {
        padding: 13px 12px;
        border-radius: 6px;
        font-size: 13px;
      }

      .primary-nav a:hover {
        background: var(--mist);
      }

      .primary-nav a::after {
        display: none;
      }

      .nav-toggle {
        display: block;
        margin-left: auto;
      }

      .header-action {
        margin-left: 0;
      }

      .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 0.85fr);
        gap: 55px;
      }

      .hero h1 {
        font-size: clamp(4rem, 6.8vw, 5.7rem);
      }

      .spotlight-layout {
        grid-template-columns: 1fr;
      }

      .discovery-sidebar {
        padding-top: 25px;
      }

      .dispatch-card {
        grid-template-columns: 170px minmax(0, 1fr);
      }

      .dispatch-card img {
        width: 170px;
        min-height: 145px;
      }

      .lab-layout {
        grid-template-columns: 1fr;
      }

      .program-card {
        min-height: 270px;
      }

      .program-number {
        margin-bottom: 24px;
      }

      .newsletter-shell {
        gap: 40px;
      }

      .footer-main {
        gap: 35px;
      }
    }

    @media (max-width: 920px) {
      .section {
        padding: 86px 0;
      }

      .split-heading,
      .about-intro,
      .faq-layout {
        grid-template-columns: 1fr;
        gap: 26px;
      }

      .split-heading {
        align-items: start;
      }

      .split-heading p {
        max-width: 680px;
      }

      .hero {
        padding-top: 60px;
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: 64px;
      }

      .hero-content {
        max-width: 780px;
      }

      .hero h1 {
        font-size: clamp(4.5rem, 10vw, 6.5rem);
      }

      .hero-visual {
        width: min(680px, 95%);
        margin-inline: auto;
      }

      .hero-image-wrap {
        aspect-ratio: 1.12;
      }

      .discipline-list {
        grid-template-columns: repeat(3, 1fr);
      }

      .discipline-list li:nth-child(4) {
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      .discipline-list li:nth-child(5) {
        border-top: 1px solid var(--line);
      }

      .citation-form {
        grid-template-columns: 1fr 1fr;
      }

      .citation-form .field:first-child {
        grid-column: 1 / -1;
      }

      .education-intro {
        grid-template-columns: 1fr;
        gap: 45px;
      }

      .education-photo {
        width: min(590px, 92%);
        margin-inline: auto;
      }

      .education-photo img {
        aspect-ratio: 1.35;
        border-radius: 180px 180px 16px 16px;
      }

      .resource-grid,
      .quote-grid {
        grid-template-columns: 1fr 1fr;
      }

      .resource-card:last-child,
      .testimonial-card:last-child {
        grid-column: 1 / -1;
      }

      .resource-card:last-child {
        display: grid;
        grid-template-columns: 0.8fr 1fr;
      }

      .teacher-quote {
        grid-template-columns: 1fr;
        gap: 25px;
      }

      .about-copy {
        max-width: 700px;
        padding-top: 0;
      }

      .principle-grid {
        grid-template-columns: 1fr;
      }

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

      .principle {
        display: grid;
        grid-template-columns: 50px 0.6fr 1fr;
        align-items: start;
        gap: 20px;
        padding: 26px 0;
      }

      .principle-number,
      .principle h3,
      .principle p {
        margin: 0;
      }

      .faq-layout {
        gap: 35px;
      }

      .events-layout {
        grid-template-columns: 1fr;
      }

      .noticeboard {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .noticeboard-section + .noticeboard-section {
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
      }

      .careers-shell {
        grid-template-columns: 1fr;
      }

      .careers-image {
        min-height: 380px;
      }

      .newsletter-shell {
        grid-template-columns: 1fr;
      }

      .footer-main {
        grid-template-columns: 1.3fr 1fr;
        gap: 45px;
      }
    }

    @media (max-width: 680px) {
      .container {
        width: calc(100% - 36px);
      }

      .section {
        padding: 72px 0;
      }

      h2 {
        font-size: clamp(2.9rem, 14vw, 4rem);
      }

      .announcement-inner {
        justify-content: center;
        text-align: center;
      }

      .announcement-message {
        font-size: 10px;
      }

      .announcement-inner > a {
        display: none;
      }

      .navbar {
        min-height: 74px;
        gap: 12px;
      }

      .brand {
        gap: 9px;
      }

      .brand-logo {
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }

      .brand-name {
        font-size: 14px;
      }

      .brand-name span {
        font-size: 7px;
      }

      .brand-tagline {
        font-size: 11px;
      }

      .header-action {
        display: none;
      }

      .hero {
        padding: 46px 0 42px;
      }

      .hero h1 {
        font-size: clamp(3.8rem, 17vw, 5.2rem);
      }

      .hero-intro {
        font-size: 15px;
      }

      .hero-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .hero-actions .button {
        width: 100%;
      }

      .hero-stat {
        padding-right: 10px;
      }

      .hero-stat + .hero-stat {
        padding-left: 12px;
      }

      .hero-stat strong {
        font-size: 30px;
      }

      .hero-stat span {
        font-size: 8px;
      }

      .hero-visual {
        width: 100%;
        padding-left: 0;
      }

      .hero-image-wrap {
        aspect-ratio: 0.92;
        border-radius: 4px 4px 42px 4px;
      }

      .observation-card {
        top: 16px;
        right: 10px;
        min-width: 190px;
      }

      .data-card {
        bottom: 70px;
        left: 10px;
        width: 245px;
      }

      .hero-visual figcaption {
        max-width: 90%;
        font-size: 9px;
      }

      .discipline-list {
        grid-template-columns: 1fr 1fr;
      }

      .discipline-list li {
        min-height: 64px;
        padding: 13px 10px;
        font-size: 9px;
      }

      .discipline-list li:nth-child(3),
      .discipline-list li:nth-child(5) {
        border-left: 0;
      }

      .discipline-list li:nth-child(3) {
        border-top: 1px solid var(--line);
      }

      .discipline-list li:nth-child(4) {
        border-left: 1px solid var(--line);
      }

      .discipline-list li:last-child {
        grid-column: 1 / -1;
      }

      .section-heading {
        margin-bottom: 38px;
      }

      .story-content {
        padding: 25px 22px;
      }

      .lead-story h3 {
        font-size: 2.55rem;
      }

      .method-note {
        flex-direction: column;
        gap: 5px;
      }

      .story-actions {
        align-items: flex-start;
        flex-direction: column;
      }

      .dispatch-card {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 15px;
      }

      .dispatch-card img {
        width: 100px;
        min-height: 145px;
      }

      .dispatch-card h4 {
        font-size: 23px;
      }

      .dispatch-card p {
        display: none;
      }

      .program-grid {
        grid-template-columns: 1fr;
      }

      .program-card {
        min-height: 260px;
      }

      .lab-content {
        padding: 25px;
      }

      .lab-content h3 {
        font-size: 33px;
      }

      .facility-ribbon {
        grid-template-columns: 1fr;
      }

      .facility-stat + .facility-stat {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        border-left: 0;
      }

      .facility-stat {
        padding: 19px 8px;
      }

      .tool-header,
      .tool-controls,
      .results-panel {
        padding-right: 20px;
        padding-left: 20px;
      }

      .tool-header {
        align-items: flex-start;
      }

      .tool-icon {
        width: 42px;
        height: 42px;
      }

      .citation-form {
        grid-template-columns: 1fr;
      }

      .citation-form .field:first-child {
        grid-column: auto;
      }

      .results-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }

      .pub-top {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .pub-year {
        justify-self: start;
        grid-row: 1;
      }

      .publication-result h4 {
        font-size: 26px;
      }

      .pub-actions .text-link {
        margin-left: 0;
      }

      .index-note {
        align-items: flex-start;
        flex-direction: column;
      }

      .education-intro {
        margin-bottom: 55px;
      }

      .education-photo {
        width: 100%;
      }

      .education-photo figcaption {
        right: 10px;
        bottom: 14px;
      }

      .resource-heading,
      .voices-heading {
        align-items: flex-start;
        flex-direction: column;
      }

      .resource-grid,
      .quote-grid {
        grid-template-columns: 1fr;
      }

      .resource-card:last-child,
      .testimonial-card:last-child {
        grid-column: auto;
      }

      .resource-card:last-child {
        display: flex;
      }

      .teacher-quote {
        padding: 28px 24px;
      }

      .principle {
        grid-template-columns: 38px 1fr;
      }

      .principle p {
        grid-column: 2;
      }

      .testimonial-card {
        min-height: 275px;
      }

      .quote-grid {
        margin-bottom: 65px;
      }

      .faq-list summary {
        font-size: 12px;
      }

      .event-card {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 18px;
        padding: 22px 18px;
      }

      .event-date {
        height: 74px;
      }

      .event-date strong {
        font-size: 32px;
      }

      .event-card h3 {
        font-size: 26px;
      }

      .event-details {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .event-details .text-link {
        margin-left: 0;
      }

      .noticeboard {
        grid-template-columns: 1fr;
      }

      .noticeboard-section + .noticeboard-section {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
      }

      .role-link {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
      }

      .role-link span {
        grid-column: 1;
        grid-row: 2;
      }

      .role-link::after {
        grid-column: 2;
        grid-row: 1 / span 2;
      }

      .careers-image {
        min-height: 300px;
      }

      .newsletter {
        padding-bottom: 60px;
      }

      .newsletter-shell {
        gap: 30px;
        padding: 34px 24px;
      }

      .newsletter-fields {
        grid-template-columns: 1fr;
      }

      .newsletter-submit {
        width: 100%;
      }

      .footer-main {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-top: 55px;
      }

      .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding: 22px 0;
      }
    }

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

      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .js .reveal {
        transform: none;
        opacity: 1;
      }
    }
  </style>

  <script>document.documentElement.classList.add("js");</script>
</head>

<body id="top">
  <a class="skip-link" href="#main-content">Skip to main content</a>
  <div class="reading-progress" id="reading-progress" aria-hidden="true"></div>

  <div class="announcement">
    <div class="container announcement-inner">
      <p class="announcement-message">New: our Open Research Agenda sets out 12 questions worth pursuing together.</p>
      <a href="#about">Explore the agenda →</a>
    </div>
  </div>

  <header class="site-header" id="site-header">
    <div class="container navbar">
      <a class="brand" href="#top" aria-label="Parallax Science Institute home">
        <img class="brand-logo" src="https://placehold.co/96x96/0B292D/D9FF73?text=P%2F&font=montserrat" alt="Parallax Science Institute logo" width="46" height="46">
        <span class="brand-copy">
          <span class="brand-name">Parallax <span>Science Institute</span></span>
          <span class="brand-tagline">A different angle on discovery.</span>
        </span>
      </a>

      <nav class="primary-nav" id="primary-nav" aria-label="Primary navigation">
        <a href="#research">Research</a>
        <a href="#discoveries">Discoveries</a>
        <a href="#education">Education</a>
        <a href="#publications">Publications</a>
        <a href="#events">Events</a>
        <a href="#about">About</a>
        <a href="#careers">Careers</a>
      </nav>

      <a class="button button-dark header-action" href="#updates">Get updates</a>

      <button class="nav-toggle" id="nav-toggle" type="button" aria-expanded="false" aria-controls="primary-nav" aria-label="Open navigation">
        <span></span>
        <span></span>
      </button>
    </div>
  </header>

  <main id="main-content">
    <section class="hero" aria-labelledby="hero-title">
      <div class="container hero-grid">
        <div class="hero-content reveal">
          <div class="hero-eyebrow">Independent science · Established 2012</div>
          <h1 id="hero-title">Breakthroughs begin with a <em>different perspective.</em></h1>
          <p class="hero-intro">
            Parallax is an independent research institute working across living systems, planetary resilience, quantum matter and science learning. We pair ambitious hypotheses with open methods, patient observation and the partnerships that turn discovery into public value.
          </p>
          <div class="hero-actions">
            <a class="button button-dark" href="#research">Explore our research</a>
            <a class="button button-outline" href="#discoveries">Read the latest breakthrough</a>
          </div>
          <div class="hero-stats" aria-label="Institute facts">
            <div class="hero-stat">
              <strong>42</strong>
              <span>Active studies</span>
            </div>
            <div class="hero-stat">
              <strong>31</strong>
              <span>Research partners</span>
            </div>
            <div class="hero-stat">
              <strong>87%</strong>
              <span>Open-access output</span>
            </div>
          </div>
        </div>

        <figure class="hero-visual reveal">
          <div class="hero-image-wrap">
            <img class="hero-image" src="https://picsum.photos/seed/parallax-hero/1100/1300?grayscale" alt="Scientific research inside a Parallax laboratory" width="1100" height="1300" fetchpriority="high">
          </div>

          <div class="observation-card">
            <span class="observation-label">Live observation</span>
            <strong>Epithelial repair / 024</strong>
            <small>Synchronised 04:32 UTC</small>
          </div>

          <div class="data-card" aria-label="Illustrative tissue recovery measurements">
            <div class="data-card-header">
              <span>Recovery signal</span>
              <span>+18.4%</span>
            </div>
            <svg viewBox="0 0 250 84" role="img" aria-label="An upward trending line chart showing a recovery signal">
              <g stroke="#36575a" stroke-width="1">
                <line x1="0" y1="20" x2="250" y2="20"></line>
                <line x1="0" y1="48" x2="250" y2="48"></line>
                <line x1="0" y1="76" x2="250" y2="76"></line>
              </g>
              <path d="M0 71 C20 68, 28 72, 45 62 S75 67, 90 50 S116 53, 132 39 S158 45, 174 28 S205 32, 220 17 S240 15, 250 7" fill="none" stroke="#D9FF73" stroke-width="3" stroke-linecap="round"></path>
              <circle cx="250" cy="7" r="4" fill="#FF745F"></circle>
            </svg>
            <div class="data-card-footer">
              <span>T+00</span>
              <span>T+12</span>
              <span>T+24 hours</span>
            </div>
          </div>

          <figcaption>In the lab: our imaging fellows map how engineered tissue responds to mechanical stress. Visual placeholder.</figcaption>
        </figure>
      </div>
    </section>

    <div class="discipline-strip" aria-label="Research disciplines">
      <div class="container">
        <ul class="discipline-list">
          <li><span>01</span> Living systems</li>
          <li><span>02</span> Planetary resilience</li>
          <li><span>03</span> Quantum matter</li>
          <li><span>04</span> STEM learning</li>
          <li><span>05</span> Open methods</li>
        </ul>
      </div>
    </div>

    <section class="section spotlight" id="discoveries" aria-labelledby="discoveries-title">
      <div class="container">
        <div class="section-heading split-heading reveal">
          <div>
            <div class="section-kicker">01 / Innovation spotlight</div>
            <h2 id="discoveries-title">One breakthrough.<br>Many possible futures.</h2>
          </div>
          <p>
            From a surprising cellular response to a decade-long climate dataset, our researchers follow findings beyond the first headline. Every project is documented, challenged and shared so the next team can go further.
          </p>
        </div>

        <div class="spotlight-layout">
          <article class="lead-story reveal">
            <div class="story-image">
              <img src="https://picsum.photos/seed/cellular-memory/1200/760" alt="Abstract scientific visual representing engineered cellular tissue" width="1200" height="760" loading="lazy" decoding="async">
              <span class="image-index">Cover story · 08 min read</span>
            </div>
            <div class="story-content">
              <div class="story-meta">
                <span class="category">Living systems</span>
                <span>Peer reviewed</span>
                <span>Research briefing 24–07</span>
              </div>
              <h3>Cells remember pressure—and that memory could help them heal.</h3>
              <p>
                A cross-disciplinary Parallax team has identified a reversible epigenetic signature that appears to retain information about mechanical injury in engineered epithelial tissue. The breakthrough suggests that cells may not simply respond to their immediate environment; they can carry a temporary molecular record of earlier stress into the repair process.
              </p>
              <p>
                The original hypothesis was preregistered around a much smaller effect. Instead, a 14-month longitudinal study across 186 tissue samples found that carefully timed mechanical conditioning accelerated wound closure by up to 18%. The team is cautious about therapeutic claims: the work remains preclinical, and independent replication is the next essential step.
              </p>
              <div class="method-note">
                <strong>Why it matters</strong>
                <span>If replicated, tunable cellular memory could inform regenerative medicine, softer implant interfaces and new models of tissue ageing. Data, analysis notebooks and null results are available alongside the paper.</span>
              </div>
              <div class="byline">
                <img src="https://i.pravatar.cc/96?u=parallax-maya-chen" alt="" width="44" height="44" loading="lazy">
                <div class="byline-copy">
                  <strong>Dr Maya Chen</strong>
                  <span>Principal Investigator · Living Systems Laboratory</span>
                </div>
              </div>
              <div class="story-actions">
                <a class="button button-dark" href="#publications" data-publication-query="epigenetic">Access publication</a>
                <a class="text-link" href="mailto:maya.chen@parallaxscience.org?subject=Epigenetic%20memory%20research%20enquiry">Contact researcher</a>
              </div>
            </div>
          </article>

          <aside class="discovery-sidebar reveal" aria-labelledby="signals-title">
            <div class="sidebar-heading">
              <h3 id="signals-title">Latest signals</h3>
              <span>From the research desk</span>
            </div>

            <article class="dispatch-card">
              <img src="https://picsum.photos/seed/tidal-wetlands/420/420" alt="Coastal landscape representing tidal wetland research" width="420" height="420" loading="lazy">
              <div>
                <div class="story-meta">
                  <span class="category">Climate</span>
                  <span>5 min</span>
                </div>
                <h4>Wetlands are doing more carbon work than models predicted.</h4>
                <p>Twelve years of field measurements reveal a overlooked relationship between tidal variability, root density and long-term carbon storage.</p>
                <a class="text-link" href="#publications" data-publication-query="wetlands">Read the briefing</a>
              </div>
            </article>

            <article class="dispatch-card">
              <img src="https://picsum.photos/seed/quantum-coherence/420/420" alt="Abstract material surface representing quantum materials research" width="420" height="420" loading="lazy">
              <div>
                <div class="story-meta">
                  <span class="category">Quantum</span>
                  <span>6 min</span>
                </div>
                <h4>Quantum coherence survives a surprisingly noisy environment.</h4>
                <p>A new two-dimensional material maintains coherent behaviour outside the near-perfect conditions usually required in the laboratory.</p>
                <a class="text-link" href="#publications" data-publication-query="phonon">Follow the evidence</a>
              </div>
            </article>

            <article class="dispatch-card">
              <img src="https://placehold.co/420x420/DDEAE2/173B3E?text=Open+Methods&font=montserrat" alt="Open Methods research update" width="420" height="420" loading="lazy">
              <div>
                <div class="story-meta">
                  <span class="category">Open science</span>
                  <span>4 min</span>
                </div>
                <h4>Publishing the null result that changed our experiment.</h4>
                <p>One unsuccessful protein-folding benchmark helped three laboratories redesign their models. Here is why we published it in full.</p>
                <a class="text-link" href="#publications" data-publication-query="protein">Examine the findings</a>
              </div>
            </article>
          </aside>
        </div>
      </div>
    </section>

    <section class="section research-section" id="research" aria-labelledby="research-title">
      <div class="container">
        <div class="section-heading split-heading reveal">
          <div>
            <div class="section-kicker light">02 / Research & laboratories</div>
            <h2 id="research-title">Labs built around questions, <em>not silos.</em></h2>
          </div>
          <p>
            Our programmes share instruments, datasets and—most importantly—people. Biologists sit with materials scientists; educators challenge statisticians; community partners help define what a useful result looks like before the first experiment begins.
          </p>
        </div>

        <div class="lab-layout">
          <article class="lab-feature reveal">
            <div class="lab-image">
              <img src="https://picsum.photos/seed/cryo-imaging/1100/700?grayscale" alt="Inside a precision scientific imaging facility" width="1100" height="700" loading="lazy">
              <span class="live-pill">Facility accepting proposals</span>
            </div>
            <div class="lab-content">
              <div class="lab-label">Lab highlight / Nanoscale Imaging Facility</div>
              <h3>Seeing the structures that inference alone cannot reach.</h3>
              <p>
                Our newest imaging suite combines cryo-electron microscopy, correlative light imaging and automated sample tracking. The facility was designed as shared infrastructure, not a private advantage: 30% of instrument time is reserved for external academic and community-lab proposals.
              </p>
              <p>
                Every visiting team leaves with more than an image. Parallax method specialists help document acquisition settings, uncertainty and analysis decisions so that another researcher can reproduce the workflow rather than merely admire the result.
              </p>
              <ul class="lab-specs" aria-label="Facility specifications">
                <li>0.18 nm resolution</li>
                <li>Cryo-EM + light imaging</li>
                <li>Open partner access</li>
              </ul>
              <a class="text-link" href="mailto:facilities@parallaxscience.org?subject=Nanoscale%20Imaging%20Facility%20proposal">Propose a facility project</a>
            </div>
          </article>

          <div class="program-grid">
            <article class="program-card reveal">
              <span class="program-number">01</span>
              <h3>Living systems</h3>
              <p>How do cells decide to repair, rest or renew? We connect molecular signals with tissue-scale behaviour, building experimental models that make regenerative hypotheses measurable and testable.</p>
              <a class="text-link" href="#publications" data-publication-query="cell">Explore programme outputs</a>
            </article>

            <article class="program-card reveal">
              <span class="program-number">02</span>
              <h3>Planetary resilience</h3>
              <p>Which natural systems can carry the most climate risk? Longitudinal field studies pair remote sensing with local observation to identify interventions that remain effective beyond a single season.</p>
              <a class="text-link" href="#publications" data-publication-query="carbon">Explore programme outputs</a>
            </article>

            <article class="program-card reveal">
              <span class="program-number">03</span>
              <h3>Quantum matter</h3>
              <p>Can coherence survive outside perfect conditions? Our physicists engineer and stress-test two-dimensional materials for future sensing, computing and ultra-low-energy technologies.</p>
              <a class="text-link" href="#publications" data-publication-query="quantum">Explore programme outputs</a>
            </article>

            <article class="program-card reveal">
              <span class="program-number">04</span>
              <h3>Learning & society</h3>
              <p>What makes scientific confidence stick? We study how people evaluate evidence, uncertainty and expertise, then translate those findings into practical classrooms and public programmes.</p>
              <a class="text-link" href="#publications" data-publication-query="curiosity">Explore programme outputs</a>
            </article>
          </div>
        </div>

        <div class="facility-ribbon reveal" aria-label="Shared research infrastructure statistics">
          <div class="facility-stat">
            <strong>06</strong>
            <span>Core facilities<br>open to partners</span>
          </div>
          <div class="facility-stat">
            <strong>18</strong>
            <span>Shared protocols<br>published this year</span>
          </div>
          <div class="facility-stat">
            <strong>24/7</strong>
            <span>Automated observing<br>across three biomes</span>
          </div>
        </div>
      </div>
    </section>

    <section class="section publications" id="publications" aria-labelledby="publications-title">
      <div class="container">
        <div class="section-heading split-heading reveal">
          <div>
            <div class="section-kicker">03 / Publications & open index</div>
            <h2 id="publications-title">Research, ready<br>to reference.</h2>
          </div>
          <div class="publication-summary">
            <strong>Good citations should take seconds.</strong>
            <p>Search our recent open publications by title, author, subject or DOI. Switch between APA, MLA and BibTeX, read the abstract, and copy a clean reference for your next paper or lesson.</p>
          </div>
        </div>

        <div class="citation-tool reveal">
          <div class="tool-header">
            <div class="tool-icon" aria-hidden="true">
              <svg width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z"></path>
                <path d="M9 7h7M9 11h5"></path>
              </svg>
            </div>
            <div>
              <h3>Parallax citation finder</h3>
              <p>Six recent open-access records · Abstracts included · No account required</p>
            </div>
          </div>

          <div class="tool-controls">
            <form class="citation-form" id="citation-form" role="search">
              <div class="field">
                <label for="pub-search">Search the publication index</label>
                <div class="input-wrap">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
                    <circle cx="11" cy="11" r="7"></circle>
                    <path d="m20 20-4-4"></path>
                  </svg>
                  <input id="pub-search" type="search" placeholder="Try “wetlands”, an author, or a DOI" autocomplete="off">
                </div>
              </div>
              <div class="field">
                <label for="citation-style">Citation format</label>
                <select id="citation-style">
                  <option value="apa">APA 7</option>
                  <option value="mla">MLA 9</option>
                  <option value="bibtex">BibTeX</option>
                </select>
              </div>
              <div class="field">
                <label for="citation-topic">Research area</label>
                <select id="citation-topic">
                  <option value="all">All areas</option>
                  <option value="living">Living systems</option>
                  <option value="planetary">Planetary resilience</option>
                  <option value="quantum">Quantum matter</option>
                  <option value="education">STEM education</option>
                  <option value="methods">Open methods</option>
                </select>
              </div>
            </form>

            <div class="quick-searches" aria-label="Popular publication searches">
              <span>Popular:</span>
              <button class="search-chip" type="button" data-query="cell" aria-pressed="false">Cell repair</button>
              <button class="search-chip" type="button" data-query="climate" aria-pressed="false">Climate</button>
              <button class="search-chip" type="button" data-query="quantum" aria-pressed="false">Quantum</button>
              <button class="search-chip" type="button" data-query="curiosity" aria-pressed="false">Curiosity</button>
            </div>
          </div>

          <div class="results-panel">
            <div class="results-meta">
              <p id="result-count" role="status" aria-live="polite">Loading open records…</p>
              <span>References generated locally in your browser</span>
            </div>
            <div id="publication-results"></div>
            <div class="show-all-wrap" id="show-all-wrap" hidden>
              <button class="button button-outline button-small" id="show-all" type="button">Show all publications</button>
            </div>
            <noscript>
              <p>The interactive citation finder requires JavaScript. For a formatted reference, email <a href="mailto:library@parallaxscience.org">library@parallaxscience.org</a>.</p>
            </noscript>
          </div>
        </div>

        <div class="index-note reveal">
          <p>This index features recent institute publications. For preprints, historical records, accessible formats or bibliography support, our research librarians can help.</p>
          <a href="mailto:library@parallaxscience.org?subject=Publication%20and%20citation%20support">Ask a research librarian</a>
        </div>
      </div>
    </section>

    <section class="section education" id="education" aria-labelledby="education-title">
      <div class="container">
        <div class="education-intro">
          <div class="reveal">
            <div class="section-kicker">04 / STEM education</div>
            <h2 id="education-title">STEM learning should feel like real science.</h2>
            <p>
              Real science is collaborative, uncertain and full of productive wrong turns. Our education team works with teachers, museum educators and community leaders to build learning experiences around those realities—not around memorising a predetermined answer.
            </p>
            <p>
              Every resource is tested with its intended audience, reviewed by an active researcher and published with adaptation guidance. Accessible documents, low-cost material alternatives and clear safeguarding notes come as standard, because a brilliant activity is only useful if people can actually run it.
            </p>
            <div class="education-metrics" aria-label="Education programme statistics">
              <div class="education-metric"><strong>2,840</strong> educators in our network</div>
              <div class="education-metric"><strong>64</strong> open-lesson resources</div>
              <div class="education-metric"><strong>19</strong> partner communities</div>
            </div>
          </div>

          <figure class="education-photo reveal">
            <img src="https://picsum.photos/seed/parallax-education/1000/1000" alt="Collaborative, hands-on learning in a STEM setting" width="1000" height="1000" loading="lazy">
            <figcaption><strong>91%</strong> of pilot teachers said students asked more investigative questions after three sessions.</figcaption>
          </figure>
        </div>

        <div class="resource-heading reveal">
          <h3>Start with a ready-to-use resource.</h3>
          <p>Flexible enough for a lunchtime science club, rigorous enough for a full scheme of work. New teaching notes are added each term.</p>
        </div>

        <div class="resource-grid">
          <article class="resource-card reveal">
            <div class="resource-image">
              <img src="https://placehold.co/720x440/DDEAE2/173B3E?text=Carbon+Cycle+Field+Kit&font=montserrat" alt="Carbon Cycle Field Kit resource cover" width="720" height="440" loading="lazy">
              <span class="resource-number">01</span>
            </div>
            <div class="resource-body">
              <div class="resource-tags">
                <span>Grades 6–9</span>
                <span>6 lessons</span>
                <span>Low-cost kit</span>
              </div>
              <h4>Field Kit 07: The Hidden Carbon Cycle</h4>
              <p>
                Students become field ecologists as they compare soil samples, model tidal flows and interrogate a genuine anonymised wetland dataset. The final lesson asks teams to defend a land-use recommendation while explicitly stating their uncertainty.
              </p>
              <p>The pack includes teacher notes, printable sample cards, extension tasks and a no-specialist-equipment pathway.</p>
              <a class="text-link" href="mailto:education@parallaxscience.org?subject=Request%20Field%20Kit%2007">Request the classroom kit</a>
            </div>
          </article>

          <article class="resource-card reveal">
            <div class="resource-image">
              <img src="https://placehold.co/720x440/163B3E/D9FF73?text=How+to+Read+a+Paper&font=montserrat" alt="How to Read a Scientific Paper open course cover" width="720" height="440" loading="lazy">
              <span class="resource-number">02</span>
            </div>
            <div class="resource-body">
              <div class="resource-tags">
                <span>Age 16+</span>
                <span>4 modules</span>
                <span>Self-paced</span>
              </div>
              <h4>Open Course: How to Read a Scientific Paper</h4>
              <p>
                Move beyond the abstract with a practical guide to hypotheses, controls, effect sizes, graphs and competing explanations. Learners annotate the same paper in three passes and compare their interpretation with the research team’s own notes.
              </p>
              <p>No prior statistics training is assumed. Captions, transcripts and screen-reader-friendly worksheets accompany every module.</p>
              <a class="text-link" href="#updates">Get course updates</a>
            </div>
          </article>

          <article class="resource-card reveal">
            <div class="resource-image">
              <img src="https://placehold.co/720x440/FF8B75/102D31?text=Near-Peer+Lab+Mentoring&font=montserrat" alt="Near-Peer Lab Mentoring programme cover" width="720" height="440" loading="lazy">
              <span class="resource-number">03</span>
            </div>
            <div class="resource-body">
              <div class="resource-tags">
                <span>Grades 10–12</span>
                <span>8 weeks</span>
                <span>Mentor-led</span>
              </div>
              <h4>Near-Peer Lab Mentorship</h4>
              <p>
                Small student teams work with early-career scientists on a bounded, answerable research question. Alongside experimental design, mentors cover research careers, failed experiments, collaboration and how to communicate a result honestly.
              </p>
              <p>Applications are coordinated through schools and youth organisations, with travel bursaries available for partner groups.</p>
              <a class="text-link" href="mailto:mentoring@parallaxscience.org?subject=Near-Peer%20Lab%20Mentorship">Apply for your school</a>
            </div>
          </article>
        </div>

        <div class="teacher-quote reveal">
          <blockquote>“The kit doesn’t ask students to imitate science. It gives them a real question, incomplete evidence and the confidence to say what they still don’t know.”</blockquote>
          <div class="quote-person">
            <img src="https://i.pravatar.cc/108?u=parallax-aisha-bell" alt="" width="54" height="54" loading="lazy">
            <div>
              <strong>Aisha Bell</strong>
              <span>Head of Science, Eastbank Community School</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section about" id="about" aria-labelledby="about-title">
      <div class="container">
        <div class="about-intro">
          <div class="reveal">
            <div class="section-kicker">05 / About Parallax</div>
            <h2 id="about-title">Trust is a research output, too.</h2>
          </div>
          <div class="about-copy reveal">
            <p>
              Parallax is an independent, non-profit institute governed by a board of researchers, educators and public-interest representatives. Our funding blends philanthropic grants, competitive research awards and partnerships, with every source disclosed at project level. No sponsor can suppress a result or override our publication policy.
            </p>
            <p>
              We built the institute around a simple conviction: rigorous science becomes more useful when its process is visible. That means preregistering where appropriate, reporting uncertainty in plain language, preserving null findings and treating thoughtful correction as a contribution rather than a reputational failure.
            </p>
            <a class="text-link" href="mailto:integrity@parallaxscience.org?subject=Open%20science%20and%20research%20integrity">Contact research integrity</a>
          </div>
        </div>

        <div class="principle-grid reveal">
          <article class="principle">
            <span class="principle-number">01</span>
            <h3>Preregister by default.</h3>
            <p>Where the study design allows, we publish hypotheses, outcome measures and analysis plans before data collection. Deviations are documented rather than quietly rewritten.</p>
          </article>
          <article class="principle">
            <span class="principle-number">02</span>
            <h3>Publish the null.</h3>
            <p>A well-run study that does not support its hypothesis still reduces uncertainty. Null and mixed findings belong in the scholarly record, not at the bottom of a drawer.</p>
          </article>
          <article class="principle">
            <span class="principle-number">03</span>
            <h3>Invite scrutiny early.</h3>
            <p>External method reviews, community advisory panels and replication residencies expose assumptions while there is still time to improve the work.</p>
          </article>
        </div>

        <div class="voices-heading reveal">
          <h3>What collaboration feels like.</h3>
          <p>Our partners bring questions, constraints and expertise we do not have. Their experience is a better measure of the institute than any mission statement.</p>
        </div>

        <div class="quote-grid">
          <article class="testimonial-card reveal">
            <span class="quote-mark" aria-hidden="true">“</span>
            <blockquote>Parallax gave our small coastal team access to serious analytical capacity without taking ownership of the question away from us.</blockquote>
            <div class="quote-person">
              <img src="https://i.pravatar.cc/96?u=parallax-luis-ortega" alt="" width="44" height="44" loading="lazy">
              <div>
                <strong>Dr Luis Ortega</strong>
                <span>Director, Estuary Civic Observatory</span>
              </div>
            </div>
          </article>

          <article class="testimonial-card reveal">
            <span class="quote-mark" aria-hidden="true">“</span>
            <blockquote>Their methods reviewer challenged our favourite explanation in the first meeting. The final experiment was harder—and considerably better.</blockquote>
            <div class="quote-person">
              <img src="https://i.pravatar.cc/96?u=parallax-elena-voss" alt="" width="44" height="44" loading="lazy">
              <div>
                <strong>Prof. Elena Voss</strong>
                <span>Visiting Fellow, Quantum Materials</span>
              </div>
            </div>
          </article>

          <article class="testimonial-card reveal">
            <span class="quote-mark" aria-hidden="true">“</span>
            <blockquote>Our students met scientists who talked honestly about uncertainty. That changed how they saw both research and their own place within it.</blockquote>
            <div class="quote-person">
              <img src="https://i.pravatar.cc/96?u=parallax-daniel-reed" alt="" width="44" height="44" loading="lazy">
              <div>
                <strong>Daniel Reed</strong>
                <span>Learning Lead, Northbank Science Museum</span>
              </div>
            </div>
          </article>
        </div>

        <div class="faq-layout" id="faq">
          <div class="faq-intro reveal">
            <div class="section-kicker">Open science, plainly</div>
            <h3>Straight answers to fair questions.</h3>
            <p>Still unsure about a dataset, collaboration or correction? Write to <a class="text-link" href="mailto:hello@parallaxscience.org">hello@parallaxscience.org</a>.</p>
          </div>

          <div class="faq-list reveal">
            <details>
              <summary>How is Parallax funded?<span class="faq-icon" aria-hidden="true">+</span></summary>
              <div class="faq-answer">
                <p>Our core funding comes from competitive research grants, philanthropic foundations and contracted collaborative projects. Annual accounts identify income by category, while individual project pages disclose relevant funders and any declared conflicts of interest.</p>
                <p>Funding agreements include an explicit right to publish. Commercial confidentiality may delay the release of sensitive material for a bounded period, but it cannot be used to bury an unfavourable scientific result.</p>
              </div>
            </details>
            <details>
              <summary>Are all datasets and methods public?<span class="faq-icon" aria-hidden="true">+</span></summary>
              <div class="faq-answer">
                <p>We aim to make methods, code, protocols and de-identified datasets available with a clear licence and persistent identifier. Where consent, privacy, ecological sensitivity or safety prevents open release, we explain the restriction and provide a governed access route whenever possible.</p>
              </div>
            </details>
            <details>
              <summary>Can schools or community laboratories collaborate?<span class="faq-icon" aria-hidden="true">+</span></summary>
              <div class="faq-answer">
                <p>Yes. Community questions have shaped our wetland monitoring, water-quality and science-learning programmes. Partners can propose a project through the Community Science Fund, request a methods workshop or join an existing study after appropriate training and safeguarding review.</p>
              </div>
            </details>
            <details>
              <summary>How do I report a possible error or request replication data?<span class="faq-icon" aria-hidden="true">+</span></summary>
              <div class="faq-answer">
                <p>Contact the corresponding author or our research integrity team with the publication title and a concise description of the concern. We acknowledge substantive queries within five working days, document the investigation and issue a visible correction when the scholarly record needs to change.</p>
              </div>
            </details>
          </div>
        </div>
      </div>
    </section>

    <section class="section events" id="events" aria-labelledby="events-title">
      <div class="container">
        <div class="section-heading split-heading reveal">
          <div>
            <div class="section-kicker">06 / Events & opportunities</div>
            <h2 id="events-title">Meet the people behind the papers.</h2>
          </div>
          <p>
            Ask a difficult question, test a new method or join a conversation before the conclusions are settled. Most public events are free, live captioned and available online; selected workshops include travel and access support.
          </p>
        </div>

        <div class="events-layout">
          <div class="events-list reveal">
            <article class="event-card">
              <div class="event-date" aria-label="September 12">
                <span>SEP</span>
                <strong>12</strong>
              </div>
              <div>
                <span class="event-type">Public lecture · Hybrid</span>
                <h3>Can a Cell Remember? New Frontiers in Tissue Repair</h3>
                <p>Dr Maya Chen and bioengineer Dr Tomas Ibe unpack the evidence for mechanical memory, including the findings that surprised them and the limitations that still matter.</p>
                <div class="event-details">
                  <span>18:00–19:30 UTC</span>
                  <span>Parallax Forum + livestream</span>
                  <a class="text-link" href="mailto:events@parallaxscience.org?subject=Reserve%20Can%20a%20Cell%20Remember">Reserve a place</a>
                </div>
              </div>
            </article>

            <article class="event-card">
              <div class="event-date" aria-label="October 3">
                <span>OCT</span>
                <strong>03</strong>
              </div>
              <div>
                <span class="event-type">Methods workshop · In person</span>
                <h3>Designing a Longitudinal Study That Can Survive Reality</h3>
                <p>A practical, small-group session on retention, missing data, preregistration and adapting field protocols without compromising the question you set out to answer.</p>
                <div class="event-details">
                  <span>09:30–16:00 UTC</span>
                  <span>Cambridge · 24 places</span>
                  <a class="text-link" href="mailto:events@parallaxscience.org?subject=Longitudinal%20Study%20Workshop">Request a workshop place</a>
                </div>
              </div>
            </article>

            <article class="event-card">
              <div class="event-date" aria-label="November 19">
                <span>NOV</span>
                <strong>19</strong>
              </div>
              <div>
                <span class="event-type">Family science night · Free</span>
                <h3>The Uncertainty Laboratory</h3>
                <p>Build a spectrometer, debate a changing dataset and meet the researchers behind our latest work. Activities are designed for curious minds aged eight and above.</p>
                <div class="event-details">
                  <span>17:30–20:00 UTC</span>
                  <span>Parallax Discovery Hall</span>
                  <a class="text-link" href="mailto:events@parallaxscience.org?subject=Uncertainty%20Laboratory%20tickets">Get free tickets</a>
                </div>
              </div>
            </article>
          </div>

          <aside class="noticeboard reveal" aria-label="Researcher noticeboard">
            <div class="noticeboard-section">
              <span class="noticeboard-label">Researcher noticeboard</span>
              <h3>Grant deadlines</h3>

              <div class="deadline">
                <div class="deadline-top">
                  <strong>Open Methods Accelerator</strong>
                  <span>18 Sep</span>
                </div>
                <p>Up to £40,000 for reusable protocols, research software or replication infrastructure.</p>
                <a href="mailto:grants@parallaxscience.org?subject=Open%20Methods%20Accelerator">Request guidance →</a>
              </div>

              <div class="deadline">
                <div class="deadline-top">
                  <strong>Community Science Fund</strong>
                  <span>02 Oct</span>
                </div>
                <p>Up to £15,000 for locally defined questions with a clear public benefit.</p>
                <a href="mailto:grants@parallaxscience.org?subject=Community%20Science%20Fund">Start an application →</a>
              </div>

              <div class="deadline">
                <div class="deadline-top">
                  <strong>Visiting Scholar Residencies</strong>
                  <span>21 Nov</span>
                </div>
                <p>Six-month interdisciplinary residencies with facility access and methods support.</p>
                <a href="mailto:grants@parallaxscience.org?subject=Visiting%20Scholar%20Residency">Check eligibility →</a>
              </div>

              <p class="noticeboard-footnote">All calls close at 17:00 UTC on the stated date. Access-support requests may be made at any point.</p>
            </div>

            <div class="noticeboard-section scientist-profile">
              <span class="noticeboard-label">Scientist in focus</span>
              <div class="scientist-heading">
                <img src="https://i.pravatar.cc/160?u=parallax-imani-rowe" alt="Portrait of Dr Imani Rowe" width="68" height="68" loading="lazy">
                <div>
                  <h4>Dr Imani Rowe</h4>
                  <span>Environmental Analytical Chemist</span>
                </div>
              </div>
              <blockquote>“A low-cost sensor is only useful when a community can interpret, maintain and challenge it.”</blockquote>
              <a class="text-link" href="#publications" data-publication-query="water">Read Imani’s publication</a>
            </div>
          </aside>
        </div>
      </div>
    </section>

    <section class="section careers" id="careers" aria-labelledby="careers-title">
      <div class="container">
        <div class="careers-shell reveal">
          <div class="careers-content">
            <div class="section-kicker">07 / Careers at Parallax</div>
            <h2 id="careers-title">Do work that can survive scrutiny.</h2>
            <p>
              We are building a workplace for people who are rigorous without being territorial, ambitious without overstating the evidence and generous with what they know. Research assistants help set agendas; technicians are credited as method experts; administrative teams are part of how good science happens.
            </p>
            <p>
              Our hiring process uses structured questions and paid practical tasks where applicable. We welcome flexible-working requests from the first conversation, and you do not need to meet every listed criterion to apply.
            </p>
            <div class="career-benefits" aria-label="Employment benefits">
              <span>Flexible by default</span>
              <span>35 days’ leave</span>
              <span>Conference support</span>
              <span>Learning budget</span>
            </div>

            <div class="role-list" aria-label="Featured open roles">
              <a class="role-link" href="mailto:careers@parallaxscience.org?subject=Application%20Postdoctoral%20Fellow">
                <strong>Postdoctoral Fellow, Epithelial Repair</strong>
                <span>Cambridge · Full-time</span>
              </a>
              <a class="role-link" href="mailto:careers@parallaxscience.org?subject=Application%20Research%20Data%20Engineer">
                <strong>Research Data Engineer</strong>
                <span>Hybrid UK · Full-time</span>
              </a>
              <a class="role-link" href="mailto:careers@parallaxscience.org?subject=Application%20STEM%20Engagement%20Producer">
                <strong>STEM Engagement Producer</strong>
                <span>London · 0.8 FTE</span>
              </a>
            </div>

            <a class="button button-dark" href="mailto:careers@parallaxscience.org?subject=Working%20at%20Parallax">Talk to our people team</a>
          </div>
          <div class="careers-image" aria-label="Collaborative research environment">
            <img src="https://picsum.photos/seed/parallax-careers/1100/1200?grayscale" alt="A collaborative environment for researchers and technical staff" width="1100" height="1200" loading="lazy">
          </div>
        </div>
      </div>
    </section>

    <section class="newsletter" id="updates" aria-labelledby="newsletter-title">
      <div class="container">
        <div class="newsletter-shell reveal">
          <div class="newsletter-copy">
            <div class="section-kicker light">The Parallax dispatch</div>
            <h2 id="newsletter-title">Good science belongs in your inbox.</h2>
            <p>
              One carefully edited dispatch each month: a breakthrough explained without hype, an open resource worth using, upcoming events and the occasional beautiful null result. No daily noise, no sold data, no manufactured certainty.
            </p>
          </div>

          <form class="newsletter-form" id="newsletter-form">
            <div class="newsletter-fields">
              <div class="newsletter-email">
                <label for="newsletter-email">Email address</label>
                <input id="newsletter-email" name="email" type="email" placeholder="you@example.org" autocomplete="email" required>
              </div>
              <button class="button button-acid newsletter-submit" type="submit">Get updates</button>
            </div>
            <div class="newsletter-preference">
              <label for="newsletter-interest">I’m most interested in</label>
              <select id="newsletter-interest" name="interest">
                <option>The full picture</option>
                <option>Research and discoveries</option>
                <option>STEM education</option>
                <option>Events and funding opportunities</option>
                <option>Careers at Parallax</option>
              </select>
            </div>
            <p class="newsletter-note">By subscribing, you agree to our <a href="#privacy" data-legal="privacy">privacy notice</a>. Unsubscribe at any time.</p>
            <p class="form-status" id="newsletter-status" role="status" aria-live="polite"></p>
          </form>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-main">
      <div class="footer-brand">
        <a class="brand" href="#top" aria-label="Parallax Science Institute home">
          <img class="brand-logo" src="https://placehold.co/96x96/D9FF73/0B292D?text=P%2F&font=montserrat" alt="" width="46" height="46" loading="lazy">
          <span class="brand-copy">
            <span class="brand-name">Parallax <span>Science Institute</span></span>
            <span class="brand-tagline">A different angle on discovery.</span>
          </span>
        </a>
        <p>
          Independent, interdisciplinary research for a world that needs better questions, stronger evidence and more people able to take part.
        </p>
        <div class="footer-socials" aria-label="Social media links">
          <a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer" aria-label="Parallax on LinkedIn, opens in a new tab">LinkedIn ↗</a>
          <a href="https://bsky.app/" target="_blank" rel="noopener noreferrer" aria-label="Parallax on Bluesky, opens in a new tab">Bluesky ↗</a>
          <a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer" aria-label="Parallax on YouTube, opens in a new tab">YouTube ↗</a>
          <a href="https://orcid.org/" target="_blank" rel="noopener noreferrer" aria-label="Parallax researcher profiles on ORCID, opens in a new tab">ORCID ↗</a>
        </div>
      </div>

      <div class="footer-column">
        <h3>Explore</h3>
        <ul class="footer-links">
          <li><a href="#research">Research programmes</a></li>
          <li><a href="#discoveries">Latest discoveries</a></li>
          <li><a href="#publications">Open publications</a></li>
          <li><a href="#education">STEM resources</a></li>
          <li><a href="#events">Events and grants</a></li>
          <li><a href="#careers">Careers</a></li>
        </ul>
      </div>

      <div class="footer-column">
        <h3>Work with us</h3>
        <ul class="footer-links">
          <li><a href="mailto:partnerships@parallaxscience.org">Research partnerships</a></li>
          <li><a href="mailto:facilities@parallaxscience.org">Facility access</a></li>
          <li><a href="mailto:press@parallaxscience.org">Press office</a></li>
          <li><a href="mailto:education@parallaxscience.org">School enquiries</a></li>
          <li><a href="mailto:integrity@parallaxscience.org">Research integrity</a></li>
          <li><a href="#faq">Open science FAQ</a></li>
        </ul>
      </div>

      <div class="footer-column">
        <h3>Visit & contact</h3>
        <address class="footer-contact">
          <p>Parallax Science Institute<br>84 Meridian Quay<br>Cambridge CB2 1TN<br>United Kingdom</p>
          <a href="mailto:hello@parallaxscience.org">hello@parallaxscience.org</a>
          <a href="tel:+4412235550148">+44 (0)1223 555 0148</a>
          <p>Reception: Mon–Fri, 08:30–18:00<br>Step-free access · Assistance dogs welcome</p>
        </address>
      </div>
    </div>

    <div class="container footer-bottom">
      <span>© <span id="current-year">2025</span> Parallax Science Institute. Registered non-profit research organisation.</span>
      <div class="footer-legal">
        <a href="#privacy" data-legal="privacy">Privacy</a>
        <a href="#terms" data-legal="terms">Terms</a>
        <a href="#accessibility" data-legal="accessibility">Accessibility</a>
        <a href="#cookies" data-legal="cookies">Cookies</a>
      </div>
    </div>
  </footer>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <dialog class="legal-dialog" id="legal-dialog" aria-labelledby="legal-title">
    <div class="dialog-header">
      <h2 id="legal-title">Policy</h2>
      <button class="dialog-close" type="button" aria-label="Close dialog">×</button>
    </div>
    <div class="dialog-body" id="legal-body"></div>
  </dialog>

  <script>
    (() => {
      "use strict";

      const header = document.getElementById("site-header");
      const nav = document.getElementById("primary-nav");
      const navToggle = document.getElementById("nav-toggle");
      const progress = document.getElementById("reading-progress");
      const toast = document.getElementById("toast");
      let toastTimer;

      function showToast(message) {
        toast.textContent = message;
        toast.classList.add("is-visible");
        window.clearTimeout(toastTimer);
        toastTimer = window.setTimeout(() => toast.classList.remove("is-visible"), 2800);
      }

      function closeMenu() {
        nav.classList.remove("is-open");
        navToggle.setAttribute("aria-expanded", "false");
        navToggle.setAttribute("aria-label", "Open navigation");
        document.body.classList.remove("menu-open");
      }

      navToggle.addEventListener("click", () => {
        const open = navToggle.getAttribute("aria-expanded") === "true";
        navToggle.setAttribute("aria-expanded", String(!open));
        navToggle.setAttribute("aria-label", open ? "Open navigation" : "Close navigation");
        nav.classList.toggle("is-open", !open);
        document.body.classList.toggle("menu-open", !open && window.innerWidth <= 680);
      });

      nav.querySelectorAll("a").forEach(link => link.addEventListener("click", closeMenu));

      document.addEventListener("keydown", event => {
        if (event.key === "Escape" && nav.classList.contains("is-open")) {
          closeMenu();
          navToggle.focus();
        }
      });

      document.addEventListener("click", event => {
        if (!header.contains(event.target) && nav.classList.contains("is-open")) closeMenu();
      });

      window.addEventListener("resize", () => {
        if (window.innerWidth > 1160) closeMenu();
      });

      let scrollTicking = false;
      function updateScrollUI() {
        const scrollTop = window.scrollY;
        const available = document.documentElement.scrollHeight - window.innerHeight;
        header.classList.toggle("is-scrolled", scrollTop > 20);
        progress.style.transform = `scaleX(${available > 0 ? Math.min(scrollTop / available, 1) : 0})`;
        scrollTicking = false;
      }

      window.addEventListener("scroll", () => {
        if (!scrollTicking) {
          window.requestAnimationFrame(updateScrollUI);
          scrollTicking = true;
        }
      }, { passive: true });
      updateScrollUI();

      const revealItems = document.querySelectorAll(".reveal");
      if ("IntersectionObserver" in window && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
        const revealObserver = new IntersectionObserver(entries => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              entry.target.classList.add("is-visible");
              revealObserver.unobserve(entry.target);
            }
          });
        }, { threshold: 0.08, rootMargin: "0px 0px -40px" });
        revealItems.forEach(item => revealObserver.observe(item));
      } else {
        revealItems.forEach(item => item.classList.add("is-visible"));
      }

      const publications = [
        {
          title: "Synthetic cells retain epigenetic memory after mechanical injury",
          authors: ["Maya Chen", "Ellis Okafor", "Rafael Valdes"],
          year: 2025,
          journal: "Parallax Journal of Living Systems",
          volume: "12",
          issue: "2",
          pages: "114–139",
          doi: "10.5281/parallax.2025.014",
          topic: "Living systems · Molecular medicine",
          area: "living",
          keywords: "cell cellular synthetic tissue repair regeneration mechanical stress breakthrough epigenetic longitudinal",
          abstract: "A preregistered longitudinal study of 186 engineered epithelial samples identifies a reversible molecular signature associated with earlier mechanical stress. Conditioning accelerated wound closure by up to 18%, although heterogeneity between cell lines and the absence of in-vivo validation limit immediate clinical interpretation."
        },
        {
          title: "Tidal wetlands as negative-carbon infrastructure: a twelve-year longitudinal study",
          authors: ["Nadia El-Sayed", "Tomas Ibe", "Imani Rowe"],
          year: 2024,
          journal: "Earth Systems Letters",
          volume: "8",
          issue: "4",
          pages: "301–328",
          doi: "10.5281/parallax.2024.031",
          topic: "Planetary resilience · Climate",
          area: "planetary",
          keywords: "climate carbon wetlands coastal estuary nature-based longitudinal tidal negative-carbon",
          abstract: "Repeated measurements across nine restored and reference wetlands show that tidal variability and below-ground root density jointly improve predictions of durable carbon storage. The findings support wetland restoration as climate infrastructure but caution against universal sequestration coefficients."
        },
        {
          title: "Phonon-mediated coherence in two-dimensional quantum materials",
          authors: ["Elena Voss", "Jae Park", "Ellis Okafor", "Mei Sato"],
          year: 2025,
          journal: "Matter & Coherence",
          volume: "3",
          issue: "1",
          pages: "44–71",
          doi: "10.5281/parallax.2025.009",
          topic: "Quantum matter · Condensed physics",
          area: "quantum",
          keywords: "quantum coherence phonon materials two-dimensional noisy sensing computing physics",
          abstract: "We report persistent coherent behaviour in a layered material exposed to controlled thermal and structural noise. A phonon-mediated model explains the observed stability better than a defect-isolation hypothesis, opening a testable route toward less restrictive quantum sensing conditions."
        },
        {
          title: "The curiosity effect: a longitudinal study of inquiry-led science teaching",
          authors: ["Amina Grant", "Daniel Reed", "Sofia Klein"],
          year: 2024,
          journal: "Journal of Science Learning",
          volume: "16",
          issue: "3",
          pages: "205–230",
          doi: "10.5281/parallax.2024.022",
          topic: "STEM education · Learning science",
          area: "education",
          keywords: "education STEM curiosity inquiry classroom students teachers longitudinal evidence learning",
          abstract: "Following 1,240 students across 38 classrooms for two academic years, this study associates structured inquiry with increased question quality and more accurate statements about uncertainty. Effects varied by teacher experience, suggesting that coaching and planning time are central to implementation."
        },
        {
          title: "A low-cost spectral atlas for community water monitoring",
          authors: ["Imani Rowe", "Luis Ortega"],
          year: 2023,
          journal: "Open Environmental Methods",
          volume: "5",
          issue: "2",
          pages: "88–112",
          doi: "10.5281/parallax.2023.018",
          topic: "Planetary resilience · Open methods",
          area: "methods",
          keywords: "water community spectral atlas sensor quality environment monitoring climate open methods",
          abstract: "This open atlas pairs low-cost spectral measurements with reference assays for turbidity, nitrate and selected organic contaminants. Calibration materials, maintenance logs and failure cases are included so community laboratories can evaluate when the method is appropriate—and when laboratory confirmation remains necessary."
        },
        {
          title: "Open benchmarks for protein folding under sparse data",
          authors: ["Rafael Valdes", "Mei Sato", "Noor Haddad"],
          year: 2025,
          journal: "Computational Biology Open",
          volume: "7",
          issue: "1",
          pages: "12–39",
          doi: "10.5281/parallax.2025.004",
          topic: "Open methods · Computational biology",
          area: "methods",
          keywords: "protein folding benchmark sparse data machine learning null result open methods cell",
          abstract: "We release six benchmark tasks designed to expose failure modes that aggregate accuracy scores can conceal. No evaluated model dominated across all sparsity regimes; the resulting null comparisons prompted substantial revisions to two participating teams’ model-selection protocols."
        }
      ];

      const searchInput = document.getElementById("pub-search");
      const styleSelect = document.getElementById("citation-style");
      const topicSelect = document.getElementById("citation-topic");
      const resultsContainer = document.getElementById("publication-results");
      const resultCount = document.getElementById("result-count");
      const showAllWrap = document.getElementById("show-all-wrap");
      const showAllButton = document.getElementById("show-all");
      const citationForm = document.getElementById("citation-form");
      let showAll = false;
      let searchTimer;

      const styleNames = {
        apa: "APA 7",
        mla: "MLA 9",
        bibtex: "BibTeX"
      };

      function node(tag, className, text) {
        const element = document.createElement(tag);
        if (className) element.className = className;
        if (text !== undefined) element.textContent = text;
        return element;
      }

      function apaName(name) {
        const parts = name.trim().split(/\s+/);
        const surname = parts.pop();
        const initials = parts.map(part => `${part.charAt(0).toUpperCase()}.`).join(" ");
        return `${surname}, ${initials}`;
      }

      function mlaFirstName(name) {
        const parts = name.trim().split(/\s+/);
        const surname = parts.pop();
        return `${surname}, ${parts.join(" ")}`;
      }

      function formatCitation(pub, style) {
        const doiUrl = `https://doi.org/${pub.doi}`;

        if (style === "mla") {
          let authorText;
          if (pub.authors.length === 1) {
            authorText = mlaFirstName(pub.authors[0]);
          } else if (pub.authors.length === 2) {
            authorText = `${mlaFirstName(pub.authors[0])}, and ${pub.authors[1]}`;
          } else {
            authorText = `${mlaFirstName(pub.authors[0])}, et al.`;
          }
          return `${authorText} “${pub.title}.” ${pub.journal}, vol. ${pub.volume}, no. ${pub.issue}, ${pub.year}, pp. ${pub.pages}. ${doiUrl}.`;
        }

        if (style === "bibtex") {
          const firstSurname = pub.authors[0].trim().split(/\s+/).pop().toLowerCase();
          const firstTitleWord = pub.title.split(/\s+/)[0].toLowerCase().replace(/[^a-z0-9]/g, "");
          const key = `${firstSurname}${pub.year}${firstTitleWord}`;
          return `@article{${key},\n  author  = {${pub.authors.join(" and ")}},\n  title   = {${pub.title}},\n  journal = {${pub.journal}},\n  year    = {${pub.year}},\n  volume  = {${pub.volume}},\n  number  = {${pub.issue}},\n  pages   = {${pub.pages.replace("–", "--")}},\n  doi     = {${pub.doi}}\n}`;
        }

        const converted = pub.authors.map(apaName);
        let authors;
        if (converted.length === 1) {
          authors = converted[0];
        } else if (converted.length === 2) {
          authors = `${converted[0]}, & ${converted[1]}`;
        } else {
          authors = `${converted.slice(0, -1).join(", ")}, & ${converted[converted.length - 1]}`;
        }
        return `${authors} (${pub.year}). ${pub.title}. ${pub.journal}, ${pub.volume}(${pub.issue}), ${pub.pages}. ${doiUrl}`;
      }

      async function copyText(text, button, message) {
        const original = button.textContent;
        try {
          if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(text);
          } else {
            const textarea = document.createElement("textarea");
            textarea.value = text;
            textarea.setAttribute("readonly", "");
            textarea.style.position = "fixed";
            textarea.style.opacity = "0";
            document.body.appendChild(textarea);
            textarea.select();
            const copied = document.execCommand("copy");
            textarea.remove();
            if (!copied) throw new Error("Copy command unavailable");
          }
          button.textContent = "Copied";
          showToast(message);
          window.setTimeout(() => { button.textContent = original; }, 1800);
        } catch (error) {
          showToast("Unable to copy automatically. Please select the text instead.");
        }
      }

      function renderPublications() {
        const query = searchInput.value.trim().toLowerCase();
        const topic = topicSelect.value;
        const style = styleSelect.value;

        const matches = publications.filter(pub => {
          const searchable = [
            pub.title,
            pub.authors.join(" "),
            pub.journal,
            pub.doi,
            pub.topic,
            pub.keywords,
            pub.abstract
          ].join(" ").toLowerCase();
          return (topic === "all" || pub.area === topic) && (!query || searchable.includes(query));
        });

        const featuredOnly = !query && topic === "all" && !showAll;
        const visible = featuredOnly ? matches.slice(0, 3) : matches;
        resultsContainer.replaceChildren();

        if (query || topic !== "all") {
          const topicName = topic === "all" ? "" : ` in ${topicSelect.options[topicSelect.selectedIndex].text}`;
          resultCount.textContent = `${matches.length} record${matches.length === 1 ? "" : "s"} found${query ? ` for “${searchInput.value.trim()}”` : ""}${topicName}`;
        } else {
          resultCount.textContent = featuredOnly
            ? `${matches.length} open records indexed · showing 3 featured`
            : `${matches.length} open records indexed`;
        }

        showAllWrap.hidden = query.length > 0 || topic !== "all" || matches.length <= 3;
        showAllButton.textContent = showAll ? "Show featured only" : `Show all ${matches.length} publications`;

        document.querySelectorAll(".search-chip").forEach(chip => {
          chip.setAttribute("aria-pressed", String(chip.dataset.query === query && topic === "all"));
        });

        if (!matches.length) {
          const empty = node("div", "no-results");
          empty.appendChild(node("h4", "", "No matching records—yet."));
          empty.appendChild(node("p", "", "Try a broader keyword, another research area, or ask our librarians to search the full archive."));
          const clearButton = node("button", "button button-dark button-small", "Clear search");
          clearButton.type = "button";
          clearButton.addEventListener("click", () => {
            searchInput.value = "";
            topicSelect.value = "all";
            showAll = false;
            renderPublications();
            searchInput.focus();
          });
          empty.appendChild(clearButton);
          resultsContainer.appendChild(empty);
          return;
        }

        visible.forEach(pub => {
          const article = node("article", "publication-result");
          const top = node("div", "pub-top");
          const main = node("div");
          main.appendChild(node("span", "pub-discipline", pub.topic));
          main.appendChild(node("h4", "", pub.title));
          main.appendChild(node("p", "pub-authors", `${pub.authors.join(" · ")}  |  ${pub.journal} ${pub.volume}(${pub.issue})`));
          top.appendChild(main);
          top.appendChild(node("span", "pub-year", String(pub.year)));
          article.appendChild(top);

          const citation = formatCitation(pub, style);
          const citationBox = node("div", "citation-box");
          citationBox.appendChild(node("span", "citation-label", `${styleNames[style]} formatted reference`));
          citationBox.appendChild(node("p", "citation-text", citation));
          article.appendChild(citationBox);

          const actions = node("div", "pub-actions");
          const copyButton = node("button", "button button-dark button-small", `Copy ${styleNames[style]}`);
          copyButton.type = "button";
          copyButton.addEventListener("click", () => copyText(citation, copyButton, `${styleNames[style]} citation copied to your clipboard.`));
          actions.appendChild(copyButton);

          const doiButton = node("button", "button button-outline button-small", "Copy DOI");
          doiButton.type = "button";
          doiButton.addEventListener("click", () => copyText(pub.doi, doiButton, "DOI copied to your clipboard."));
          actions.appendChild(doiButton);

          const contact = node("a", "text-link", "Contact authors");
          contact.href = `mailto:publications@parallaxscience.org?subject=${encodeURIComponent(`Research enquiry: ${pub.title}`)}`;
          actions.appendChild(contact);
          article.appendChild(actions);

          const abstract = node("details", "abstract");
          abstract.appendChild(node("summary", "", "Read abstract and limitations"));
          abstract.appendChild(node("p", "", pub.abstract));
          article.appendChild(abstract);

          resultsContainer.appendChild(article);
        });
      }

      citationForm.addEventListener("submit", event => {
        event.preventDefault();
        showAll = true;
        renderPublications();
      });

      searchInput.addEventListener("input", () => {
        window.clearTimeout(searchTimer);
        searchTimer = window.setTimeout(renderPublications, 140);
      });

      styleSelect.addEventListener("change", renderPublications);
      topicSelect.addEventListener("change", renderPublications);

      showAllButton.addEventListener("click", () => {
        showAll = !showAll;
        renderPublications();
      });

      document.querySelectorAll(".search-chip").forEach(chip => {
        chip.addEventListener("click", () => {
          const alreadyActive = chip.getAttribute("aria-pressed") === "true";
          searchInput.value = alreadyActive ? "" : chip.dataset.query;
          topicSelect.value = "all";
          showAll = true;
          renderPublications();
        });
      });

      document.querySelectorAll("[data-publication-query]").forEach(link => {
        link.addEventListener("click", () => {
          searchInput.value = link.dataset.publicationQuery;
          topicSelect.value = "all";
          showAll = true;
          renderPublications();
        });
      });

      renderPublications();

      const newsletterForm = document.getElementById("newsletter-form");
      const newsletterStatus = document.getElementById("newsletter-status");
      newsletterForm.addEventListener("submit", event => {
        event.preventDefault();
        const emailInput = document.getElementById("newsletter-email");
        if (!emailInput.checkValidity()) {
          emailInput.reportValidity();
          return;
        }
        const button = newsletterForm.querySelector("button[type='submit']");
        const interest = document.getElementById("newsletter-interest").value;
        button.textContent = "Subscribed";
        button.disabled = true;
        newsletterStatus.textContent = `You’re on the list for “${interest}”. Check your inbox to confirm your subscription.`;
        showToast("Welcome to the Parallax dispatch.");
        window.setTimeout(() => {
          newsletterForm.reset();
          button.textContent = "Get updates";
          button.disabled = false;
        }, 2400);
      });

      const legalContent = {
        privacy: {
          title: "Privacy at Parallax",
          paragraphs: [
            "We collect only the information needed to respond to enquiries, administer event registrations, process applications and deliver requested updates. Newsletter details are used for the preferences you select and are never sold or shared for third-party advertising.",
            "You may request access, correction or deletion of your personal information by emailing privacy@parallaxscience.org. Research datasets are governed separately according to participant consent, ethics approvals and applicable data-protection requirements.",
            "This notice was last reviewed in February 2025. Substantive changes will be dated and summarised on this page."
          ]
        },
        terms: {
          title: "Website terms",
          paragraphs: [
            "Parallax publishes website material for research, education and general information. Scientific findings may evolve as new evidence emerges; content should not be treated as medical, legal or professional advice.",
            "Open publications and educational resources carry their own licences. Where no licence is stated, you may share short attributed quotations and links, but should contact permissions@parallaxscience.org before reproducing substantial material.",
            "We welcome links to our work and ask that they preserve context, avoid implying institutional endorsement and do not misrepresent uncertainty or study limitations."
          ]
        },
        accessibility: {
          title: "Accessibility",
          paragraphs: [
            "We aim to meet WCAG 2.2 AA across our public digital services. This page supports keyboard navigation, visible focus states, responsive text, reduced-motion preferences and descriptive labels for interactive controls.",
            "Our public events offer live captions unless otherwise stated, and step-free venue information is available before registration. Alternative publication formats, including accessible Word documents and plain-text tables, can be requested from library@parallaxscience.org.",
            "If any part of this website creates a barrier, email accessibility@parallaxscience.org or call +44 (0)1223 555 0148. We will work with you to provide the information in a usable format."
          ]
        },
        cookies: {
          title: "Cookies",
          paragraphs: [
            "Our core website does not require advertising cookies or cross-site tracking. Essential storage may be used to remember security, accessibility or service preferences where those features are enabled.",
            "Embedded third-party media, when present, is loaded only after you choose to view it. External image and font providers may receive standard technical request information such as an IP address and browser type.",
            "Questions about website measurement or cookie controls can be sent to privacy@parallaxscience.org."
          ]
        }
      };

      const legalDialog = document.getElementById("legal-dialog");
      const legalTitle = document.getElementById("legal-title");
      const legalBody = document.getElementById("legal-body");

      document.querySelectorAll("[data-legal]").forEach(link => {
        link.addEventListener("click", event => {
          event.preventDefault();
          const content = legalContent[link.dataset.legal];
          if (!content) return;
          legalTitle.textContent = content.title;
          legalBody.replaceChildren();
          content.paragraphs.forEach(text => legalBody.appendChild(node("p", "", text)));
          if (typeof legalDialog.showModal === "function") {
            legalDialog.showModal();
          } else {
            showToast(`${content.title}: contact hello@parallaxscience.org for details.`);
          }
        });
      });

      legalDialog.querySelector(".dialog-close").addEventListener("click", () => legalDialog.close());
      legalDialog.addEventListener("click", event => {
        if (event.target === legalDialog) legalDialog.close();
      });

      document.getElementById("current-year").textContent = new Date().getFullYear();
    })();
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T10:16:08.284Z",
  "url": "https://benchmark.aimac.invalid/4c7ed7170ce95bd36bd0bebf4daf5a6ce1e87a302337d2be111651a906d0bb31.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Parallax Science Institute home\">",
          "target": [
            ".navbar > .brand[href$=\"#top\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Parallax Science Institute home\">",
          "target": [
            ".navbar > .brand[href$=\"#top\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<svg viewBox=\"0 0 250 84\" role=\"img\" aria-label=\"An upward trending line chart showing a recovery signal\">",
          "target": [
            "svg[viewBox=\"0 0 250 84\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body id=\"top\">",
          "target": [
            "#top"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"reading-progress\" id=\"reading-progress\" aria-hidden=\"true\" style=\"transform: scaleX(0);\"></div>",
          "target": [
            "#reading-progress"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Parallax Science Institute home\">",
          "target": [
            ".navbar > .brand[href$=\"#top\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<svg viewBox=\"0 0 250 84\" role=\"img\" aria-label=\"An upward trending line chart showing a recovery signal\">",
          "target": [
            "svg[viewBox=\"0 0 250 84\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<svg viewBox=\"0 0 250 84\" role=\"img\" aria-label=\"An upward trending line chart showing a recovery signal\">",
          "target": [
            "svg[viewBox=\"0 0 250 84\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Parallax Science Institute home\">",
          "target": [
            ".navbar > .brand[href$=\"#top\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Parallax Science Institute home\">",
          "target": [
            ".navbar > .brand[href$=\"#top\"]"
          ]
        }
      ]
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "autocomplete-valid",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "the autocomplete attribute is correctly formatted"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<input id=\"pub-search\" type=\"search\" placeholder=\"Try \u201cwetlands\u201d, an author, or a DOI\" autocomplete=\"off\">",
          "target": [
            "#pub-search"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"search-chip\" type=\"button\" data-query=\"cell\" aria-pressed=\"false\">Cell repair</button>",
          "target": [
            "button[data-query=\"cell\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 id=\"hero-title\">Breakthroughs begin with a <em>different perspective.</em></h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2 id=\"discoveries-title\">One breakthrough.<br>Many possible futures.</h2>",
                  "target": [
                    "#discoveries-title"
                  ]
                },
                {
                  "html": "<h3>Cells remember pressure\u2014and that memory could help them heal.</h3>",
                  "target": [
                    ".story-content > h3"
                  ]
                },
                {
                  "html": "<h3 id=\"signals-title\">Latest signals</h3>",
                  "target": [
                    "#signals-title"
                  ]
                },
                {
                  "html": "<h4>Wetlands are doing more carbon work than models predicted.</h4>",
                  "target": [
                    ".dispatch-card:nth-child(2) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Quantum coherence survives a surprisingly noisy environment.</h4>",
                  "target": [
                    ".dispatch-card:nth-child(3) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Publishing the null result that changed our experiment.</h4>",
                  "target": [
                    ".dispatch-card:nth-child(4) > div > h4"
                  ]
                },
                {
                  "html": "<h2 id=\"research-title\">Labs built around questions, <em>not silos.</em></h2>",
                  "target": [
                    "#research-title"
                  ]
                },
                {
                  "html": "<h3>Seeing the structures that inference alone cannot reach.</h3>",
                  "target": [
                    ".lab-content > h3"
                  ]
                },
                {
                  "html": "<h3>Living systems</h3>",
                  "target": [
                    ".program-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Planetary resilience</h3>",
                  "target": [
                    ".program-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Quantum matter</h3>",
                  "target": [
                    ".program-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Learning &amp; society</h3>",
                  "target": [
                    ".program-card:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"publications-title\">Research, ready<br>to reference.</h2>",
                  "target": [
                    "#publications-title"
                  ]
                },
                {
                  "html": "<h3>Parallax citation finder</h3>",
                  "target": [
                    ".tool-header > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h4>Synthetic cells retain epigenetic memory after mechanical injury</h4>",
                  "target": [
                    ".publication-result:nth-child(1) > .pub-top > div > h4"
                  ]
                },
                {
                  "html": "<h4>Tidal wetlands as negative-carbon infrastructure: a twelve-year longitudinal study</h4>",
                  "target": [
                    ".publication-result:nth-child(2) > .pub-top > div > h4"
                  ]
                },
                {
                  "html": "<h4>Phonon-mediated coherence in two-dimensional quantum materials</h4>",
                  "target": [
                    ".publication-result:nth-child(3) > .pub-top > div > h4"
                  ]
                },
                {
                  "html": "<h2 id=\"education-title\">STEM learning should feel like real science.</h2>",
                  "target": [
                    "#education-title"
                  ]
                },
                {
                  "html": "<h3>Start with a ready-to-use resource.</h3>",
                  "target": [
                    ".resource-heading > h3"
                  ]
                },
                {
                  "html": "<h4>Field Kit 07: The Hidden Carbon Cycle</h4>",
                  "target": [
                    ".resource-card:nth-child(1) > .resource-body > h4"
                  ]
                },
                {
                  "html": "<h4>Open Course: How to Read a Scientific Paper</h4>",
                  "target": [
                    ".resource-card:nth-child(2) > .resource-body > h4"
                  ]
                },
                {
                  "html": "<h4>Near-Peer Lab Mentorship</h4>",
                  "target": [
                    ".resource-card:nth-child(3) > .resource-body > h4"
                  ]
                },
                {
                  "html": "<h2 id=\"about-title\">Trust is a research output, too.</h2>",
                  "target": [
                    "#about-title"
                  ]
                },
                {
                  "html": "<h3>Preregister by default.</h3>",
                  "target": [
                    ".principle:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Publish the null.</h3>",
                  "target": [
                    ".principle:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Invite scrutiny early.</h3>",
                  "target": [
                    ".principle:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>What collaboration feels like.</h3>",
                  "target": [
                    ".voices-heading > h3"
                  ]
                },
                {
                  "html": "<h3>Straight answers to fair questions.</h3>",
                  "target": [
                    ".faq-intro > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"events-title\">Meet the people behind the papers.</h2>",
                  "target": [
                    "#events-title"
                  ]
                },
                {
                  "html": "<h3>Can a Cell Remember? New Frontiers in Tissue Repair</h3>",
                  "target": [
                    ".event-card:nth-child(1) > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Designing a Longitudinal Study That Can Survive Reality</h3>",
                  "target": [
                    ".event-card:nth-child(2) > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>The Uncertainty Laboratory</h3>",
                  "target": [
                    ".event-card:nth-child(3) > div:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Grant deadlines</h3>",
                  "target": [
                    ".noticeboard-section:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h4>Dr Imani Rowe</h4>",
                  "target": [
                    ".scientist-heading > div > h4"
                  ]
                },
                {
                  "html": "<h2 id=\"careers-title\">Do work that can survive scrutiny.</h2>",
                  "target": [
                    "#careers-title"
                  ]
                },
                {
                  "html": "<h2 id=\"newsletter-title\">Good science belongs in your inbox.</h2>",
                  "target": [
                    "#newsletter-title"
                  ]
                },
                {
                  "html": "<h3>Explore</h3>",
                  "target": [
                    ".footer-column:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Work with us</h3>",
                  "target": [
                    ".footer-column:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Visit &amp; contact</h3>",
                  "target": [
                    ".footer-column:nth-child(4) > h3"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"main-content\">",
                  "target": [
                    "#main-content"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" class=\"js\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#e9f1ec",
                "bgColor": "#082327",
                "contrastRatio": 14.26,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 14.26"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<p class=\"announcement-message\">New: our Open Research Agenda sets out 12 questions worth pursuing together.</p>",
          "target": [
            ".announcement-message"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" class=\"js\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"primary-nav\" id=\"primary-nav\" aria-label=\"Primary navigation\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"pub-search\">Search the publication index</label>",
                  "target": [
                    "label[for=\"pub-search\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"pub-search\" type=\"search\" placeholder=\"Try \u201cwetlands\u201d, an author, or a DOI\" autocomplete=\"off\">",
          "target": [
            "#pub-search"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" class=\"js\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\" class=\"js\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img class=\"brand-logo\" src=\"https://placehold.co/96x96/0B292D/D9FF73?text=P%2F&amp;font=montserrat\" alt=\"Parallax Science Institute logo\" width=\"46\" height=\"46\">",
          "target": [
            ".navbar > .brand[href$=\"#top\"] > .brand-logo[width=\"46\"][height=\"46\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"pub-search\">Search the publication index</label>",
                  "target": [
                    "label[for=\"pub-search\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"pub-search\" type=\"search\" placeholder=\"Try \u201cwetlands\u201d, an author, or a DOI\" autocomplete=\"off\">",
          "target": [
            "#pub-search"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main-content\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"discipline-list\">\n          <li><span>01</span> Living systems</li>\n          <li><span>02</span> Planetary resilience</li>\n          <li><span>03</span> Quantum matter</li>\n          <li><span>04</span> STEM learning</li>\n          <li><span>05</span> Open methods</li>\n        </ul>",
          "target": [
            ".discipline-list"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><span>01</span> Living systems</li>",
          "target": [
            ".discipline-list > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img class=\"brand-logo\" src=\"https://placehold.co/96x96/0B292D/D9FF73?text=P%2F&amp;font=montserrat\" alt=\"Parallax Science Institute logo\" width=\"46\" height=\"46\">",
          "target": [
            ".navbar > .brand[href$=\"#top\"] > .brand-logo[width=\"46\"][height=\"46\"]"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"citation-style\">Citation format</label>",
                  "target": [
                    "label[for=\"citation-style\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"citation-style\">\n                  <option value=\"apa\">APA 7</option>\n                  <option value=\"mla\">MLA 9</option>\n                  <option value=\"bibtex\">BibTeX</option>\n                </select>",
          "target": [
            "#citation-style"
          ]
        }
      ]
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>Read abstract and limitations</summary>",
          "target": [
            ".publication-result:nth-child(1) > .abstract > summary"
          ]
        }
      ]
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<svg viewBox=\"0 0 250 84\" role=\"img\" aria-label=\"An upward trending line chart showing a recovery signal\">",
          "target": [
            "svg[viewBox=\"0 0 250 84\"]"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 198.1,
                "height": 50.4
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (198.1px by 50.4px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main-content\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"hero-stats\" aria-label=\"Institute facts\">",
          "target": [
            ".hero-stats"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "7.5pt (10px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" aria-labelledby=\"hero-title\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"hero-eyebrow\">Independent science \u00b7 Established 2012</div>",
          "target": [
            ".hero-eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block",
              "data": {
                "messageKey": "bgOverlap"
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"footer-brand\">",
                  "target": [
                    ".footer-brand"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's contrast ratio could not be determined because of element overlap"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a class=\"brand\" href=\"#top\" aria-label=\"Parallax Science Institute home\">",
          "target": [
            ".footer-brand > .brand[href$=\"#top\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element's contrast ratio could not be determined because of element overlap"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9999",
                "bgColor": "#f9f9f5",
                "contrastRatio": 2.8,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"discipline-strip\" aria-label=\"Research disciplines\">",
                  "target": [
                    ".discipline-strip"
                  ]
                },
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>01</span>",
          "target": [
            "li:nth-child(1) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9999",
                "bgColor": "#f9f9f5",
                "contrastRatio": 2.8,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"discipline-strip\" aria-label=\"Research disciplines\">",
                  "target": [
                    ".discipline-strip"
                  ]
                },
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>02</span>",
          "target": [
            "li:nth-child(2) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9999",
                "bgColor": "#f9f9f5",
                "contrastRatio": 2.8,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"discipline-strip\" aria-label=\"Research disciplines\">",
                  "target": [
                    ".discipline-strip"
                  ]
                },
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>03</span>",
          "target": [
            "li:nth-child(3) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9999",
                "bgColor": "#f9f9f5",
                "contrastRatio": 2.8,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"discipline-strip\" aria-label=\"Research disciplines\">",
                  "target": [
                    ".discipline-strip"
                  ]
                },
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>04</span>",
          "target": [
            "li:nth-child(4) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#8a9999",
                "bgColor": "#f9f9f5",
                "contrastRatio": 2.8,
                "fontSize": "12.8pt (17px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"discipline-strip\" aria-label=\"Research disciplines\">",
                  "target": [
                    ".discipline-strip"
                  ]
                },
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>05</span>",
          "target": [
            "li:nth-child(5) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.8 (foreground color: #8a9999, background color: #f9f9f5, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607276",
                "bgColor": "#eef1eb",
                "contrastRatio": 4.42,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section publications\" id=\"publications\" aria-labelledby=\"publications-title\">",
                  "target": [
                    "#publications"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"section-kicker\">03 / Publications &amp; open index</div>",
          "target": [
            "#publications > .container > .section-heading.split-heading.is-visible > div:nth-child(1) > .section-kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607276",
                "bgColor": "#eef1eb",
                "contrastRatio": 4.42,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section publications\" id=\"publications\" aria-labelledby=\"publications-title\">",
                  "target": [
                    "#publications"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>This index features recent institute publications. For preprints, historical records, accessible formats or bibliography support, our research librarians can help.</p>",
          "target": [
            ".index-note > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607276",
                "bgColor": "#e8eee7",
                "contrastRatio": 4.27,
                "fontSize": "6.8pt (9px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"teacher-quote reveal is-visible\">",
                  "target": [
                    ".teacher-quote"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.27 (foreground color: #607276, background color: #e8eee7, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Head of Science, Eastbank Community School</span>",
          "target": [
            ".teacher-quote > .quote-person > div > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.27 (foreground color: #607276, background color: #e8eee7, font size: 6.8pt (9px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#488379",
                "bgColor": "#ffffff",
                "contrastRatio": 4.37,
                "fontSize": "16.5pt (22px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section about\" id=\"about\" aria-labelledby=\"about-title\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #488379, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"principle-number\">01</span>",
          "target": [
            ".principle:nth-child(1) > .principle-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #488379, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#488379",
                "bgColor": "#ffffff",
                "contrastRatio": 4.37,
                "fontSize": "16.5pt (22px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section about\" id=\"about\" aria-labelledby=\"about-title\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #488379, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"principle-number\">02</span>",
          "target": [
            ".principle:nth-child(2) > .principle-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #488379, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#488379",
                "bgColor": "#ffffff",
                "contrastRatio": 4.37,
                "fontSize": "16.5pt (22px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section about\" id=\"about\" aria-labelledby=\"about-title\">",
                  "target": [
                    "#about"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.37 (foreground color: #488379, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"principle-number\">03</span>",
          "target": [
            ".principle:nth-child(3) > .principle-number"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.37 (foreground color: #488379, background color: #ffffff, font size: 16.5pt (22px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607276",
                "bgColor": "#eef1eb",
                "contrastRatio": 4.42,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-title\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"section-kicker\">06 / Events &amp; opportunities</div>",
          "target": [
            "#events > .container > .section-heading.split-heading.is-visible > div > .section-kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607276",
                "bgColor": "#eef1eb",
                "contrastRatio": 4.42,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-title\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>\n            Ask a difficult question, test a new method or join a conversation before the conclusions are settled. Most public events are free, live captioned and available online; selected workshops include travel and access support.\n          </p>",
          "target": [
            "#events > .container > .section-heading.split-heading.is-visible > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607276",
                "bgColor": "#eef1eb",
                "contrastRatio": 4.42,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section publications\" id=\"publications\" aria-labelledby=\"publications-title\">",
                  "target": [
                    "#publications"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"section-kicker\">03 / Publications &amp; open index</div>",
          "target": [
            "#publications > .container > .section-heading.split-heading.reveal > div:nth-child(1) > .section-kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607276",
                "bgColor": "#eef1eb",
                "contrastRatio": 4.42,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-title\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"section-kicker\">06 / Events &amp; opportunities</div>",
          "target": [
            "#events > .container > .section-heading.split-heading.reveal > div > .section-kicker"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 8.3pt (11px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#607276",
                "bgColor": "#eef1eb",
                "contrastRatio": 4.42,
                "fontSize": "12.0pt (16px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section events\" id=\"events\" aria-labelledby=\"events-title\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>\n            Ask a difficult question, test a new method or join a conversation before the conclusions are settled. Most public events are free, live captioned and available online; selected workshops include travel and access support.\n          </p>",
          "target": [
            "#events > .container > .section-heading.split-heading.reveal > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.42 (foreground color: #607276, background color: #eef1eb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 13273
      },
      {
        "y": 576,
        "height": 13273
      },
      {
        "y": 1152,
        "height": 13273
      },
      {
        "y": 1728,
        "height": 13273
      },
      {
        "y": 2304,
        "height": 13273
      },
      {
        "y": 2880,
        "height": 13273
      },
      {
        "y": 3456,
        "height": 13273
      },
      {
        "y": 4032,
        "height": 13273
      },
      {
        "y": 4608,
        "height": 13273
      },
      {
        "y": 5184,
        "height": 13273
      },
      {
        "y": 5760,
        "height": 13273
      },
      {
        "y": 6336,
        "height": 13273
      },
      {
        "y": 6912,
        "height": 13273
      },
      {
        "y": 7488,
        "height": 13273
      },
      {
        "y": 8064,
        "height": 13273
      },
      {
        "y": 8640,
        "height": 13273
      },
      {
        "y": 9216,
        "height": 13273
      },
      {
        "y": 9792,
        "height": 13273
      },
      {
        "y": 10368,
        "height": 13273
      },
      {
        "y": 10944,
        "height": 13273
      },
      {
        "y": 11520,
        "height": 13273
      },
      {
        "y": 12096,
        "height": 13273
      },
      {
        "y": 12553,
        "height": 13273
      }
    ],
    "scans": 24,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Science" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Science"
- Description: Scientific research, discoveries, STEM education, and science news.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Science" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Careers", "Education", "Publications".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Science" category. Consider themes similar to: "Innovation Spotlight", "Lab Highlights", "STEM Resources".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "breakthrough", "hypothesis", "longitudinal study".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Contact Researcher", "Get Updates", "Access Publication".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Science" sector. Ideas similar but not limited to: "citation finder".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "grant deadlines", "featured research", "scientist profiles".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.