Research page: design pass (areas ledger, pillar CTAs + spectrum diamonds, lifted stream, hero questions)

src/pages/research.astro

@@ -28,17 +28,17 @@ import Link from '@ui/Link.astro';
 import { postSlug } from '@utils/posts';
 
 const pillars = [
-  { title: 'Network-sourced AI', href: '/blog/network-sourced-ai/', body: 'Intelligence composed live over a network, rather than bundling all data, compute, and algorithms into a single centralized source owned by one entity. A conventional AI system is a trained model plus, optionally, a RAG layer over data that happens to be colocated or on the internet. NSAI decentralizes both halves. The model context can come from many independent data owners, and the model itself can be an ensemble of models from many independent owners.' },
-  { title: 'Attribution-based control', href: '/attribution-based-control/', body: 'A relationship between sources of AI-related data, compute, and talent and the AI users receiving predictions. These two groups each have ABC when resource owners dynamically control how much intelligence to give each AI prediction they support, and AI users dynamically control which resource providers they want to rely on for each AI prediction.' },
-  { title: 'Structured transparency', href: '/blog/structured-transparency/', body: 'A framework for governing information flows so that parties can collaborate on data without giving up control of it. It names five guarantees a flow can need: input privacy, output privacy, input verification, output verification, and flow governance. Privacy-enhancing technologies (PETs) are the mechanisms that supply those guarantees, and ST provides a vocabulary for saying which ones a given flow is missing.' },
+  { title: 'Network-sourced AI', href: '/blog/network-sourced-ai/', cta: 'Read about NSAI', body: 'Intelligence composed live over a network, rather than bundling all data, compute, and algorithms into a single centralized source owned by one entity. A conventional AI system is a trained model plus, optionally, a RAG layer over data that happens to be colocated or on the internet. NSAI decentralizes both halves. The model context can come from many independent data owners, and the model itself can be an ensemble of models from many independent owners.' },
+  { title: 'Attribution-based control', href: '/attribution-based-control/', cta: 'Read about ABC', body: 'A relationship between sources of AI-related data, compute, and talent and the AI users receiving predictions. These two groups each have ABC when resource owners dynamically control how much intelligence to give each AI prediction they support, and AI users dynamically control which resource providers they want to rely on for each AI prediction.' },
+  { title: 'Structured transparency', href: '/blog/structured-transparency/', cta: 'Read about ST', body: 'A framework for governing information flows so that parties can collaborate on data without giving up control of it. It names five guarantees a flow can need: input privacy, output privacy, input verification, output verification, and flow governance. Privacy-enhancing technologies (PETs) are the mechanisms that supply those guarantees, and ST provides a vocabulary for saying which ones a given flow is missing.' },
 ];
 
 const themes = [
-  { icon: 'iconoir-network', art: '/images/research/themes/protocols-networks-power.jpg', title: 'Protocols, Networks & Power', question: 'How can technical infrastructure distribute rather than concentrate power?' },
-  { icon: 'iconoir-doc-magnifying-glass', art: '/images/research/themes/secure-audits.jpg', title: 'Secure Audits & External Oversight', question: 'How should increasingly powerful AI systems be evaluated and governed?' },
-  { icon: 'iconoir-cpu', art: '/images/research/themes/emerging-architectures.jpg', title: 'Emerging AI Architectures', question: 'How will model routing, ensembles, fusions, and multi-agent systems change who can develop a frontier AI system?' },
-  { icon: 'iconoir-copyright', art: '/images/research/themes/copyright-value-data.jpg', title: 'Copyright & the Value of Data', question: 'How should society understand economic value and the price of digital goods in the AI era?' },
-  { icon: 'iconoir-community', art: '/images/research/themes/alternative-ownership.jpg', title: 'Alternative Ownership, Governance & Business Models', question: 'What alternatives exist to conventional models of technology ownership?' },
+  { icon: 'iconoir-network', title: 'Protocols, Networks & Power', question: 'How can technical infrastructure distribute rather than concentrate power?' },
+  { icon: 'iconoir-doc-magnifying-glass', title: 'Secure Audits & External Oversight', question: 'How should increasingly powerful AI systems be evaluated and governed?' },
+  { icon: 'iconoir-cpu', title: 'Emerging AI Architectures', question: 'How will model routing, ensembles, fusions, and multi-agent systems change who can develop a frontier AI system?' },
+  { icon: 'iconoir-copyright', title: 'Copyright & the Value of Data', question: 'How should society understand economic value and the price of digital goods in the AI era?' },
+  { icon: 'iconoir-community', title: 'Alternative Ownership, Governance & Business Models', question: 'What alternatives exist to conventional models of technology ownership?' },
 ];
 
 const fellowsReceive = [
@@ -124,24 +124,25 @@ const recent = (await getCollection('blog', ({ data }) =>
     contentGap="tight"
     padBottom="calc(var(--spacing-max) * 2)"
   >
+    <p class="hero-questions"><em><span>Who gets to know what?</span> <span>Who gets paid?</span> <span>Who gets to say no?</span></em></p>
     <Fragment slot="actions">
       <Button href="#fellows">Meet the fellows</Button>
       <Button variant="outline" href="#interest">Express interest</Button>
     </Fragment>
-    <StreamSwoop slot="swoop" id="stream-embed-research" />
+    <StreamSwoop slot="swoop" id="stream-embed-research" bleed={0.4} />
   </SimpleHero>
 
   <!-- 2 · What we're working on — the three pillars -->
   <div id="about">
     <ContentSection surface="dim" as="h4" width="col-10" align="left" headGap="tight" heading="What we’re working on">
-      <p class="pillars-questions" data-reveal><em>Who gets to know what? Who gets paid? Who gets to say no?</em></p>
       <p class="pillars-lead" data-reveal>We work across 3 primary pillars.</p>
       <div class="pillars-grid">
         {pillars.map((pl, i) => (
           <article class="pillar" data-reveal data-reveal-delay={i * 70}>
-            <p class="pillar__index text-eyebrow">Pillar {i + 1}</p>
-            <h5 class="pillar__title"><a href={pl.href}>{pl.title}</a></h5>
+            <span class="pillar__diamond" aria-hidden="true" style={`--flow-offset:${i}`}></span>
+            <h5 class="pillar__title">{pl.title}</h5>
             <p class="pillar__body">{pl.body}</p>
+            <div class="pillar__cta"><Button href={pl.href}>{pl.cta}</Button></div>
           </article>
         ))}
       </div>
@@ -159,20 +160,17 @@ const recent = (await getCollection('blog', ({ data }) =>
       intro="OpenMined Research focuses on 5 distinct areas for deeper exploration."
       introMeasure="45em"
     >
-      <div class="themes-grid">
-        {themes.map((t, i) => (
-          <div class="theme-card" data-reveal data-reveal-delay={i * 70}>
-            <img class="theme-card__art" src={t.art} alt="" width="1400" height="786" loading="lazy" data-fade />
-            <div class="theme-card__body">
-              <div class="theme-card__head">
-                <Icon name={t.icon} size={20} class="theme-card__icon" />
-                <h5>{t.title}</h5>
-              </div>
-              <p>{t.question}</p>
-            </div>
+      <dl class="areas" data-reveal>
+        {themes.map((t) => (
+          <div class="areas__row">
+            <dt class="areas__name">
+              <span class="areas__tile" aria-hidden="true"><Icon name={t.icon} size={28} /></span>
+              <span>{t.title}</span>
+            </dt>
+            <dd class="areas__question">{t.question}</dd>
           </div>
         ))}
-      </div>
+      </dl>
     </ContentSection>
   </div>
 
@@ -228,24 +226,81 @@ const recent = (await getCollection('blog', ({ data }) =>
 </Page>
 
 <style>
+  /* The three questions under the hero lede: the same size, set apart by
+     italic and headline ink. */
+  .hero-questions { color: var(--text-headline); }
+  /* Lines break between questions, never inside one. */
+  .hero-questions span { white-space: nowrap; }
+
   /* ── Pillars ───────────────────────────────────────────────────────── */
-  .pillars-questions { margin: 0 0 var(--spacing-S); font-size: 21px; color: var(--text-headline); }
   .pillars-lead { margin: 0 0 var(--spacing-3XL); }
   .pillars-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: var(--spacing-XL);
   }
-  /* The pillars band is dim (it also paints over the hero stream's tail, as
-     the first band after the hero did before), so cards sit one step lighter. */
+  /* Outlined, not filled: the card body is the band's own surface, and a
+     softened headline-ink rule draws the card (lighter than --border-strong,
+     which read too heavy on the areas ledger). */
   .pillar {
-    padding: var(--spacing-2XL);
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacing-3XL);
     border-radius: var(--border-radius-S);
-    background-color: var(--surface-background-default);
+    border: 1px solid color-mix(in srgb, var(--text-headline) 28%, transparent);
   }
-  .pillar__index { margin: 0 0 var(--spacing-S); }
-  .pillar__title { margin: 0 0 var(--spacing-M); }
+  .pillar__title { margin: 0 0 var(--spacing-L); }
   .pillar__body { margin: 0; }
+  /* Pinned to the card foot, so the three CTAs share a baseline whatever
+     each body's length. */
+  .pillar__cta { margin-top: auto; padding-top: var(--spacing-3XL); }
+
+
+  /* ── Pillar diamonds: the stream's spectrum, flowing ────────────────────
+     A sharp brand diamond above each pillar title, filled with the hero
+     stream's hues. The fill is ONE horizontal tile holding the full spectrum
+     (it ends on the colour it starts with), repeated and slid exactly one
+     tile width per loop — so the flow is seamless, with no cut at the wrap.
+     Each card starts a third of the way further along the spectrum, so
+     left→right the three read warm → violet → cool, echoing the stream above.
+     A soft glow in the same colours; static under reduced motion. */
+  .pillar__diamond {
+    --flow-dur: 16s;
+    --flow-tile: 176px; /* 8× the diamond: one hue family at a time */
+    position: relative;
+    display: block;
+    width: 22px;
+    height: 22px;
+    margin: var(--spacing-XS) 0 var(--spacing-2XL) var(--spacing-XS);
+    transform: rotate(45deg);
+    background-image: linear-gradient(90deg,
+      var(--color-gold-500), var(--color-orange-500), var(--color-red-500),
+      var(--color-violet-500), var(--color-blue-500), var(--color-teal-500),
+      var(--color-green-500), var(--color-gold-500));
+    background-size: var(--flow-tile) 100%;
+    background-repeat: repeat-x;
+    animation: pillar-flow var(--flow-dur) linear infinite;
+    animation-delay: calc(var(--flow-offset) * var(--flow-dur) * -0.3);
+  }
+  .pillar__diamond::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: inherit;
+    animation: inherit;
+    filter: blur(7px);
+    opacity: 0.35;
+    z-index: -1;
+  }
+  @keyframes pillar-flow {
+    from { background-position-x: 0; }
+    to   { background-position-x: calc(-1 * var(--flow-tile)); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pillar__diamond,
+    .pillar__diamond::after { animation: none; }
+    .pillar__diamond { background-position-x: calc(var(--flow-offset) * var(--flow-tile) * -0.3); }
+  }
 
   /* ── Fellowship: program | what fellows receive ────────────────────── */
   .fellowship-grid {
@@ -280,55 +335,64 @@ const recent = (await getCollection('blog', ({ data }) =>
     .pillar:nth-child(3) { grid-column: auto; }
   }
 
-  /* ── Research themes grid ──────────────────────────────────────────
-     Five cards composed on a 6-track grid: three across the top (span 2),
-     two wider beneath (span 3) — a deliberate 3/2 composition instead of a
-     grid that orphans a short last row. Children are component roots, so
-     the selectors reach them via :global. */
-  .themes-grid {
+  /* ── Research areas: a ruled ledger, not cards ──────────────────────────
+     The homepage's bordered-rows device (HomeFederatedNetwork): one bordered
+     frame, hairline rules between rows. Area name (with its line icon) left,
+     the framing question right as reading text — the register of an
+     institute's research-areas listing rather than feature cards. A <dl>:
+     each area defines its question. Unnumbered — the areas aren't a sequence. */
+  .areas {
+    margin: 0;
+    border-top: 1px solid color-mix(in srgb, var(--text-headline) 16%, transparent);
+  }
+  .areas__row {
     display: grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-    gap: var(--spacing-XL);
+    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+    align-items: center;
+    column-gap: var(--spacing-3XL);
+    padding-block: var(--spacing-3XL);
+    /* Headline ink at low opacity: a quiet rule that still reads on the dark
+       surface, where --border-subtle all but disappears. */
+    border-bottom: 1px solid color-mix(in srgb, var(--text-headline) 16%, transparent);
   }
-  .theme-card { grid-column: span 2; }
-  .theme-card:nth-child(n + 4) { grid-column: span 3; }
-
-  /* The card: generated series artwork as a banner, icon + title, question.
-     Art is CSS-cropped (aspect-ratio box + cover) per the images rule. */
-  .theme-card {
+  .areas__tile {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    border-radius: var(--border-radius-M);
     background-color: var(--surface-background-dim);
-    border-radius: var(--border-radius-S);
-    overflow: hidden;
-  }
-  .theme-card__art {
-    width: 100%;
-    height: auto; /* release the attribute height so aspect-ratio governs */
-    aspect-ratio: 16 / 6;
-    object-fit: cover;
+    color: var(--text-headline);
   }
-  .theme-card__body { padding: var(--spacing-2XL); }
-  .theme-card__head {
+  .areas__name {
     display: flex;
     align-items: center;
-    gap: var(--spacing-M);
-    margin-bottom: var(--spacing-M);
-    color: var(--text-headline); /* currentColor for the icon */
+    gap: var(--spacing-2XL);
+    margin: 0;
+    font-family: var(--font-secondary);
+    font-size: clamp(var(--h5-min), 1.62vw, var(--h5-max));
+    line-height: 1.35;
+    color: var(--text-headline);
+    text-wrap: balance;
+  }
+  .areas__question {
+    margin: 0;
+    font-size: 18px;
+    line-height: 1.6;
+    color: var(--text-body);
+    text-wrap: pretty;
   }
-  .theme-card__head h5 { margin: 0; }
-  .theme-card__icon { flex: none; }
-  .theme-card__body p { margin: 0; }
 
 
 
   @media (max-width: 991px) {
-    .themes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .theme-card,
-    .theme-card:nth-child(n + 4) { grid-column: auto; }
-    /* five cards on two tracks: the last spans both, so no half-empty row */
-    .theme-card:nth-child(5) { grid-column: span 2; }
   }
   @media (max-width: 767px) {
-    .themes-grid { grid-template-columns: 1fr; }
-    .theme-card:nth-child(5) { grid-column: auto; }
+    .areas__row { grid-template-columns: 1fr; row-gap: var(--spacing-L); padding-block: var(--spacing-2XL); }
+    .areas__name { gap: var(--spacing-L); }
+    .areas__tile { width: 48px; height: 48px; }
+    .areas__question { font-size: 16px; }
   }
 </style>