/* Levain Arena
   Colours come from the Levain Arena logo: teal navy, sage green, warm gold.
   The hero painting is nested squares after Josef Albers' Homage to the Square:
   gold is the budget, navy human validation, and the square between them each agent's research. */

:root {
  --bg: #F5F2EA;
  --room: #EDE9E0;
  --paper: #FBF9F4;
  --ink: #1B2733;
  --muted: #58606A;
  --soft: #4B535C;
  --rule: #D6CFC0;
  --field: #BFB8AA;
  --pencil: #A49E92;
  --navy: #1D5468;
  --navy-deep: #143F50;
  --green: #498D76;
  --gold: #E5B44F;
  --gold-ink: #7A5A12;
  --gutter: clamp(20px, 4.4vw, 64px);
  --head-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* yeast cells: slightly irregular ovals, no two alike */
  --cell-1: 54% 46% 51% 49% / 47% 55% 45% 53%;
  --cell-2: 46% 54% 47% 53% / 54% 46% 55% 45%;
  --cell-3: 51% 49% 56% 44% / 50% 55% 45% 50%;
  --cell-4: 57% 43% 48% 52% / 46% 51% 49% 54%;
  --sans: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* paper grain for walls and plates */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* paint grain, blended soft-light over colour */
  --paint-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 20px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--paper-grain);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
sub { font-size: .7em; line-height: 0; vertical-align: -.2em; }
::selection { background: #EBD28A; color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), 1312px); margin-inline: auto; }

.skip {
  position: absolute; left: var(--gutter); top: -64px; z-index: 100;
  background: var(--navy); color: var(--bg); padding: 10px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- the logo: the Levain Arena mark, cut into layers (assets/logo/) and animated, beside the name ----------
   Every layer of the mark is a piece of the original logo image; the name is set in Jost capitals with open
   spacing. On load the navy ring paints itself round, green and gold fill in, the name is written out, and the
   bubbles float out of the gap; then the bubbles drift a little. In the footer more bubbles keep rising. */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 420deg; }
.brand, .lockup { display: inline-block; text-decoration: none; }
.logo { --lh: 48px; position: relative; display: flex; align-items: center; height: var(--lh); }
.lockup .logo { --lh: 80px; }
.logo-mark { position: relative; flex: none; height: 100%; aspect-ratio: 570 / 586; }
.logo-mark img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
/* the name sits on the rings' centre line, which is a little below the middle because the bubbles rise above */
.l-word {
  margin-left: calc(var(--lh) * .2); margin-right: -.17em; translate: 0 calc(var(--lh) * .035);
  font-family: var(--sans); font-size: calc(var(--lh) * .29); font-weight: 450; line-height: 1;
  letter-spacing: .17em; text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
.lockup .l-word { font-size: calc(var(--lh) * .25); }
.l-ring, .l-green, .l-gold { transform-origin: 48.85% 54.41%; }
.l-b, .l-drift { transform-origin: var(--ox) var(--oy); }
.l-drift { opacity: 0; }
.js .l-ring {
  -webkit-mask-image: conic-gradient(from 60deg at 48.85% 54.41%, #000 calc(var(--sweep) - 16deg), transparent var(--sweep));
          mask-image: conic-gradient(from 60deg at 48.85% 54.41%, #000 calc(var(--sweep) - 16deg), transparent var(--sweep));
  animation: l-sweep 1.15s cubic-bezier(.45, .05, .25, 1) .1s both;
}
.js .l-green { animation: l-grow 1s var(--ease) .45s both; }
.js .l-gold { animation: l-pop .8s cubic-bezier(.34, 1.56, .64, 1) .75s both; }
.js .l-word { animation: l-write 1.1s var(--ease) .6s both; }
.js .l-b {
  animation: l-out .8s cubic-bezier(.34, 1.4, .64, 1) both, l-float 4.8s ease-in-out infinite alternate;
  animation-delay: calc(1.1s + var(--n) * .13s), calc(2.3s + var(--n) * .7s);
}
.js .l-drift { animation: l-drift 7.5s cubic-bezier(.3, .1, .4, 1) infinite; animation-delay: calc(2.8s + var(--n) * 1.9s); }
/* the footer logo waits until it scrolls into view (site.js adds .in) */
.js .lockup .logo:not(.in) img { animation-play-state: paused; }
@keyframes l-sweep { from { --sweep: 0deg; } to { --sweep: 420deg; } }
@keyframes l-grow { from { transform: scale(.55); opacity: 0; } }
@keyframes l-pop { from { transform: scale(0); } }
@keyframes l-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes l-out { from { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
@keyframes l-float { to { transform: translate(.8%, -2.4%); } }
@keyframes l-drift {
  0% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: .9; }
  100% { transform: translate(6%, -38%) scale(.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .l-ring, .js .l-green, .js .l-gold, .js .l-word, .js .l-b, .js .l-drift { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- painted cells (CSS, shown until the canvas painting takes over) ---------- */
/* Albers' placement: each cell sits low in the one around it, three times as much space above as below. */
.homage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--cell-1); background: var(--o, var(--navy)); transform: rotate(-12deg) scale(.86); }
.homage i { position: absolute; display: block; }
.homage .m { border-radius: var(--cell-2); }
.homage .n { border-radius: var(--cell-3); }
.homage .m { left: 15%; top: 22.5%; width: 70%; height: 70%; background: var(--m, var(--green)); }
.homage .n { left: 30%; top: 45%; width: 40%; height: 40%; background: var(--i, var(--gold)); }
.homage .grain { position: absolute; inset: 0; border-radius: var(--cell-1); pointer-events: none; background-image: var(--paint-grain); background-size: 180px; mix-blend-mode: soft-light; opacity: .5; }

.glyph { position: relative; flex: none; border-radius: var(--cell-1); background: var(--navy); transform: rotate(-14deg); }
.glyph i { position: absolute; display: block; border-radius: var(--cell-2); }
.glyph i:last-child { border-radius: var(--cell-3); }
.glyph i:first-child { left: 15%; top: 22.5%; width: 70%; height: 70%; background: var(--green); }
.glyph i:last-child { left: 30%; top: 45%; width: 40%; height: 40%; background: var(--gold); }
/* drawn in pencil, not yet painted */
.glyph.unpainted, .glyph.unpainted i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--navy); }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background-color: var(--bg); background-image: var(--paper-grain); border-bottom: 1px solid var(--rule); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--head-h); }
.site-nav { display: flex; align-items: center; gap: 40px; }
.site-nav ul { display: flex; gap: 30px; }
.site-nav ul a { font-size: 15px; color: var(--muted); text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.site-nav ul a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav ul a.is-current { color: var(--ink); border-bottom-color: var(--gold); }
.menu-btn { display: none; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--bg); border: 0; border-radius: 0; cursor: pointer;
  font: 500 16px/1 var(--sans); padding: 16px 24px; text-decoration: none; letter-spacing: .01em;
  transition: background .3s var(--ease);
}
.btn:hover { background: var(--navy-deep); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-sm { font-size: 14.5px; padding: 12px 18px; }
.link { font-weight: 500; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: color .3s var(--ease); }
.link:hover { color: var(--green); }

/* ---------- hero ---------- */
.hero {
  padding-bottom: clamp(72px, 8vw, 120px);
  /* gallery light falling on the wall behind the painting */
  background: radial-gradient(ellipse 46% 62% at 73% 40%, rgba(255, 253, 247, .85), rgba(255, 253, 247, 0) 72%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 104px); align-items: center;
  padding: clamp(56px, 6.5vw, 104px) 0 clamp(56px, 6vw, 92px);
}
.hero h1 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.03; font-weight: 450; letter-spacing: -.026em; text-wrap: balance; }
.lede { margin-top: 30px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; max-width: 30em; }
.support { margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 33em; }
.actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; }

.hero-art { width: min(100%, 560px); justify-self: end; }
.painting { position: relative; aspect-ratio: 1 / 1; }
/* the cell's cast shadow follows its outline (drawn by painting.js) */
.painting .shade { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; pointer-events: none; }
.painting .homage { filter: drop-shadow(0 22px 24px rgba(27, 39, 51, .28)); }
.painting .homage { position: absolute; inset: 0; }
.painting canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.painting.live .homage { visibility: hidden; }
/* the culture breathes slowly; its granules and daughter cells move on the canvas (painting.js) */
.js .painting.live { transform-origin: 46% 57%; animation: breathe 5.2s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.018) rotate(-.4deg); } }
@media (prefers-reduced-motion: reduce) { .js .painting.live { animation: none; } }

.label { margin-top: 26px; }
.label-now { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.label-now.swap { opacity: 0; transform: translateY(4px); }
.label-head { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.label-logo { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; }
.label-logo:empty { display: none; }
.label-logo img { width: 100%; height: 100%; object-fit: contain; }
.label-name { font-size: 13.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.label-count { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.label-title { margin-top: 8px; min-height: 2.8em; font-size: 19px; line-height: 1.4; letter-spacing: -.006em; color: var(--ink); max-width: 32em; text-wrap: pretty; }
.swatches { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.swatches:empty { display: none; }
.sw-b {
  width: 18px; height: 17px; padding: 0; border: 0; border-radius: var(--cell-3); cursor: pointer;
  background-color: var(--c); background-image: var(--paint-grain); background-size: 90px; background-blend-mode: soft-light;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sw-b:hover { transform: translateY(-2px); }
.sw-b[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.sw-b.pending { background: transparent; box-shadow: inset 0 0 0 1px var(--pencil); }
.sw-b.pending[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--pencil), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.play { margin-left: 8px; font: 500 13px/1 var(--sans); color: var(--muted); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 3px 0; cursor: pointer; }
.play:hover { color: var(--ink); }
.label-key { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 40em; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.metrics li { padding: 22px 24px 0 0; }
.metrics li + li { padding-left: 24px; border-left: 1px solid var(--rule); }
.metrics strong { display: block; font-size: clamp(26px, 2.8vw, 44px); font-weight: 350; letter-spacing: -.02em; line-height: 1.1; }
.metrics span { display: block; margin-top: 8px; font-size: 15px; color: var(--muted); }

/* ---------- entrance and reveal ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .rise { animation: rise 1.1s var(--ease) both; }
.js .hero-copy .rise:nth-child(2) { animation-delay: .12s; }
.js .hero-copy .rise:nth-child(3) { animation-delay: .22s; }
.js .hero-copy .rise:nth-child(4) { animation-delay: .32s; }
.js .metrics.rise { animation-delay: .5s; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rise { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- sections ---------- */
.section { padding: clamp(88px, 9.5vw, 152px) 0; border-top: 1px solid var(--rule); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 96px); }
.sec-head h2, .sec-row h2 { font-size: clamp(36px, 3.8vw, 58px); font-weight: 400; letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
@media (min-width: 961px) { .sec-head > * { position: sticky; top: calc(var(--head-h) + 36px); } }
.prose > p, .plain, .intro { font-size: 18px; line-height: 1.65; max-width: 38em; }
.prose > p + p { margin-top: 18px; }
.intro { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }
.kicker { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }

/* research question */
.question { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 28px; margin: 48px 0; align-items: start; }
.question p { font-size: clamp(24px, 2.2vw, 32px); font-weight: 350; line-height: 1.3; letter-spacing: -.012em; max-width: 26em; }
.question .glyph { width: 44px; height: 44px; margin-top: 6px; }
.question-review .glyph i:first-child { background: #3F7890; }
.question-review .glyph i:last-child { background: #A9CBD3; }
.principle { margin-top: 52px; padding-top: 22px; border-top: 1.5px solid var(--ink); font-weight: 500; }

/* the Levain Harness: a navy panel at the head of the arena design, like the cell wall of the painting */
.harness {
  position: relative; margin-bottom: 72px; padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.4vw, 52px) clamp(30px, 3.4vw, 46px);
  color: var(--bg); background-color: var(--navy-deep); background-image: var(--paint-grain); background-size: 180px; background-blend-mode: soft-light;
  box-shadow: 0 30px 50px -34px rgba(27, 39, 51, .6);
}
.harness .glyph { position: absolute; right: clamp(22px, 3vw, 44px); top: clamp(22px, 3vw, 40px); width: 46px; height: 46px; background: #2A6479; }
.harness .kicker { color: rgba(245, 242, 234, .72); }
.harness-lede { margin-top: 14px; max-width: 30em; padding-right: 56px; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.34; letter-spacing: -.008em; text-wrap: pretty; }
.harness-lede strong { font-weight: 500; color: var(--gold); }
.harness-parts { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; padding-top: 26px; border-top: 1px solid rgba(245, 242, 234, .2); }
.harness-parts h4 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16.5px; font-weight: 500; }
.harness-parts h4::before { content: ""; width: 12px; height: 11px; flex: none; border-radius: var(--cell-2); transform: rotate(-18deg); background-color: var(--gold); background-image: var(--paint-grain); background-size: 90px; background-blend-mode: soft-light; }
.harness-parts p { margin-top: 7px; font-size: 15.5px; line-height: 1.55; color: rgba(245, 242, 234, .8); }
.harness-link { color: inherit; font-weight: 500; text-decoration: none; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; }
.harness-link:hover { color: var(--navy); }

/* arena design */
.steps { margin-top: 20px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.steps li { display: flex; flex-direction: column; }
.steps .sw { position: relative; display: block; width: 86%; aspect-ratio: 1 / 1; border-radius: var(--cell-1); background-color: var(--c); background-image: var(--paint-grain); background-size: 180px; background-blend-mode: soft-light; }
.steps li:nth-child(2) .sw { border-radius: var(--cell-2); transform: rotate(12deg); }
.steps li:nth-child(3) .sw { border-radius: var(--cell-3); transform: rotate(-8deg); }
.steps li:nth-child(4) .sw { border-radius: var(--cell-4); transform: rotate(20deg); }
.steps li:nth-child(5) .sw { border-radius: var(--cell-2); transform: rotate(-16deg); }
.steps li:nth-child(6) .sw { border-radius: var(--cell-3); transform: rotate(6deg); }
.steps li:nth-child(2) .sw::after, .steps li:nth-child(5) .sw::after {
  content: ""; position: absolute; right: -9%; top: -7%; width: 31%; height: 29%;
  border-radius: var(--cell-4); background: inherit; background-blend-mode: soft-light; transform: rotate(-20deg);
}
.js .steps .sw { clip-path: inset(-30% 130% -30% -30%); transition: clip-path 1.2s var(--ease); transition-delay: calc(var(--k) * 120ms); }
.js .steps.in .sw { clip-path: inset(-30% -30% -30% -30%); }
.js .steps .n, .js .steps .t { opacity: 0; transition: opacity .8s var(--ease); transition-delay: calc(var(--k) * 120ms + .5s); }
.js .steps.in .n, .js .steps.in .t { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .steps .sw { clip-path: none; transition: none; } .js .steps .n, .js .steps .t { opacity: 1; transition: none; } }
.steps .n { margin-top: 16px; font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.steps .t { margin-top: 4px; padding-right: 14px; font-size: 16px; line-height: 1.35; font-weight: 500; }
.pillars { margin-top: 84px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; }
.pillars h3 { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 450; }
.pillars .dot { width: 13px; height: 12px; flex: none; border-radius: var(--cell-1); transform: rotate(-20deg); background-color: var(--c); background-image: var(--paint-grain); background-size: 90px; background-blend-mode: soft-light; }
.pillars p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--muted); }

/* agents: a room of plates with museum labels */
.room { background-color: var(--room); background-image: var(--paper-grain); }
.sec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; }
.sec-row p { font-size: 17px; color: var(--muted); }
.plates { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-top: 1.5px solid var(--ink); }
.plates li { display: grid; grid-template-columns: 156px minmax(0, 1fr); column-gap: 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); }
/* a small stage beside each label: the research is the headline, the scene a vignette */
.plates .plate { width: 156px; }
.plates .reveal:nth-child(2n) { --d: .08s; }
.plate {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background-color: var(--paper); background-image: var(--paper-grain);
  box-shadow: 0 1px 1px rgba(27, 39, 51, .08), 0 16px 28px -20px rgba(27, 39, 51, .5);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
/* each plate is a small stage: the Bake AI bread (assets/bread/, pieces of the mascot image) with the company's logo.
   bakery.js plays a different scene for each agent when the plate comes into view and on hover. */
.stage .floor { position: absolute; left: 12%; bottom: 4%; width: 39%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(27, 39, 51, .2), rgba(27, 39, 51, 0)); }
.stage .bread { position: absolute; left: 7%; bottom: 5%; height: 80%; aspect-ratio: 1 / 1; z-index: 2; transform-origin: 52% 95%; }
.stage .bread img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.b-arm { transform-origin: 17% 78%; }
.b-hat { transform-origin: 54% 34%; }
.b-eyes { transform-origin: 50% 64.5%; }
.stage .mlogo { position: absolute; left: 63%; top: 29%; width: 26%; height: 36%; object-fit: contain; z-index: 1; }
.stage.front .mlogo { z-index: 3; }
/* the ninth bread is still a sketch: the same image, drained to its outlines */
.stage .bread.sketch { left: 50%; translate: -50% 0; filter: grayscale(1) contrast(2.6) brightness(1.32); opacity: .5; }
.pending .floor { left: 30.5%; opacity: .5; }
.plates li:hover .plate { transform: translateY(-4px); box-shadow: 0 1px 1px rgba(27, 39, 51, .08), 0 24px 36px -22px rgba(27, 39, 51, .55); }
/* what each agent researched is the headline of its label; the model's name sits above it, like an artist's name */
.caption h3 { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.3; letter-spacing: .13em; text-transform: uppercase; }
.chip { width: 11px; height: 10px; flex: none; border-radius: var(--cell-2); transform: rotate(-20deg); background-color: var(--c); background-image: var(--paint-grain); background-size: 90px; background-blend-mode: soft-light; }
.work { margin-top: 10px; font-size: 20px; font-weight: 400; line-height: 1.38; letter-spacing: -.006em; color: var(--ink); max-width: 26em; text-wrap: pretty; }
/* what each agent researched is brushed over in its own colour, the way the painting is brushed in: a band of paint
   under the lower half of each line, streaked with grain. In the index it is painted when the entry comes into view. */
.hl {
  --hl: color-mix(in srgb, var(--c, var(--gold)) 36%, transparent);
  background-image: var(--paint-grain), linear-gradient(var(--hl), var(--hl));
  background-blend-mode: soft-light, normal;
  background-repeat: no-repeat;
  background-size: 100% .72em;
  background-position: 0 84%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: .18em .42em .3em .5em;
  padding: 0 .12em; margin: 0 -.12em;
}
.js .plates li .hl { background-size: 0% .72em; transition: background-size 1.4s cubic-bezier(.6, .05, .3, 1) calc(var(--d, 0s) + .35s); }
.js .plates li.in .hl { background-size: 100% .72em; }
@media (prefers-reduced-motion: reduce) { .js .plates li .hl { background-size: 100% .72em; transition: none; } }
.meta { margin-top: 12px; font-size: 12.5px; color: var(--muted); letter-spacing: .04em; }
.nw { white-space: nowrap; }   /* names joined by a dash stay on one line */
.pending .plate { background: transparent; box-shadow: inset 0 0 0 1px var(--pencil); }
.js .pending .bread.sketch { animation: proofing 4.6s ease-in-out infinite alternate; }
@keyframes proofing { to { transform: scale(1.025, 1.035); } }
@media (prefers-reduced-motion: reduce) { .js .pending .bread.sketch { animation: none; } }
.pending .chip { background: transparent; box-shadow: inset 0 0 0 1px var(--pencil); }
.pending h3 { color: var(--muted); }
.pending .meta { color: var(--gold-ink); }

.status-block { margin-top: 128px; }
.status-block h3 { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }
.status-table { border-top: 1.5px solid var(--ink); }
.status-table div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.status-table dt { font-weight: 500; }
.status-table dd { color: var(--muted); }

.statement { margin-top: 128px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 36px; align-items: start; }
.statement .glyph { width: 64px; height: 64px; margin-top: 8px; }
.statement p { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--soft); max-width: 34em; }
.statement .loud { display: block; margin-bottom: 20px; font-size: clamp(28px, 3.4vw, 50px); font-weight: 500; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); max-width: 22em; }

/* evaluation */
.phases { margin: 52px 0 76px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1.5px solid var(--ink); }
.phases li { padding-top: 20px; }
.phases .reveal:nth-child(2) { --d: .1s; }
.phases .reveal:nth-child(3) { --d: .2s; }
.phases .n { font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.phases h3 { margin-top: 6px; font-size: 21px; font-weight: 450; }
.phases p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.plain { margin-top: 10px; }
.plain.after-statuses { margin-top: 40px; }
.statuses { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--rule); }
.statuses li { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px; font-weight: 450; line-height: 1.3; }
.statuses li::before { content: ""; width: 16px; height: 15px; flex: none; border-radius: var(--cell-1); transform: rotate(-15deg); background-color: var(--c); background-image: var(--paint-grain); background-size: 90px; background-blend-mode: soft-light; }

/* lists */
.list { margin-top: 14px; }
.list li { position: relative; padding-left: 24px; font-size: 17.5px; line-height: 1.55; }
.list li + li { margin-top: 10px; }
.list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 7px; border-radius: var(--cell-2); background: var(--navy); }

/* paper */
.manuscript { margin-top: 52px; padding-top: 22px; border-top: 1.5px solid var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.manuscript span { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }
.manuscript strong { display: inline-flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 400; letter-spacing: -.01em; }
.manuscript strong::before { content: ""; width: 14px; height: 13px; border-radius: var(--cell-4); transform: rotate(-20deg); background-color: var(--gold); background-image: var(--paint-grain); background-size: 90px; background-blend-mode: soft-light; }

/* co-author invitation */
.join h2 { font-size: clamp(36px, 4.2vw, 64px); font-weight: 400; letter-spacing: -.03em; line-height: 1.02; max-width: 15em; text-wrap: balance; }
.join-grid { margin-top: 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.join .prose h3 { margin-top: 44px; font-size: 21px; font-weight: 450; }
.join .prose h3 + p { margin-top: 10px; }
.form {
  position: relative; background-color: var(--paper); background-image: var(--paper-grain);
  padding: clamp(24px, 3vw, 44px);
  box-shadow: 0 1px 1px rgba(27, 39, 51, .08), 0 30px 50px -34px rgba(27, 39, 51, .5);
}
.form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--navy); }
.form h3 { font-size: 25px; font-weight: 450; letter-spacing: -.01em; }
.field { margin-top: 22px; }
.field label { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 500; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; margin: 0; appearance: none; border-radius: 0;
  font: 400 17px/1.4 var(--sans); color: var(--ink);
  background: #fff; border: 1px solid var(--field); padding: 12px 14px;
  transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 116px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { margin-top: 28px; width: 100%; }
.form-note { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.form-status { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--green); }
.form-status:empty { display: none; }

/* institutions */
.institutions { padding: clamp(64px, 7vw, 104px) 0; }
.institutions h2 { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }
/* each card: the institution's colour rises from the bottom over a photograph, with its logo in white */
.partners { margin-top: 30px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.partners .reveal:nth-child(2) { --d: .07s; } .partners .reveal:nth-child(3) { --d: .14s; }
.partners .reveal:nth-child(4) { --d: .21s; } .partners .reveal:nth-child(5) { --d: .28s; }
.partner { position: relative; aspect-ratio: 5 / 4; overflow: hidden; isolation: isolate; background: var(--brand); }
.partner .photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform 1.4s var(--ease); }
.partner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--brand) 0%, var(--brand) 21%, color-mix(in srgb, var(--brand) 55%, transparent) 42%, color-mix(in srgb, var(--brand) 10%, transparent) 66%, transparent 86%);
}
.partner:hover .photo { transform: scale(1.05); }
.partner .inst-logo { position: absolute; left: 18px; bottom: 18px; height: var(--lh, 24px); width: auto; max-width: calc(100% - 36px); object-fit: contain; object-position: left bottom; }
/* one-colour logos are shown reversed, in white, as their guidelines allow on a dark ground */
.partner .inst-logo.white { filter: brightness(0) invert(1); }
.photo-credits { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 90em; }
.photo-credits a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* faq */
.faq div { padding: 26px 0; border-top: 1px solid var(--rule); }
.faq div:last-child { border-bottom: 1px solid var(--rule); }
.faq dt { font-size: 21px; font-weight: 450; }
.faq dd { margin-top: 8px; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 40em; }
.faq a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* footer */
.site-foot { border-top: 1.5px solid var(--ink); padding: 64px 0 80px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
.foot-brand p { margin-top: 20px; font-size: 15.5px; color: var(--muted); }
.foot-nav { display: flex; gap: 72px; }
.foot-nav ul { display: grid; gap: 8px; align-content: start; font-size: 15px; }
.foot-nav a { color: var(--muted); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .plates { grid-template-columns: minmax(0, 1fr); }
  .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-nav ul { gap: 22px; }
  .site-nav { gap: 28px; }
}
@media (max-width: 960px) {
  :root { --head-h: 64px; }
  .menu-btn {
    display: inline-flex; align-items: center;
    font: 500 15px/1 var(--sans); color: var(--ink); letter-spacing: .02em;
    background: none; border: 1.5px solid var(--ink); border-radius: 0; padding: 9px 14px; cursor: pointer;
  }
  .site-nav {
    display: none; position: absolute; top: var(--head-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background-color: var(--bg); background-image: var(--paper-grain); border-bottom: 1px solid var(--rule);
    padding: 4px var(--gutter) 24px;
  }
  .site-nav.open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 18px; color: var(--ink); }
  .site-nav ul a:hover, .site-nav ul a.is-current { border-bottom-color: var(--rule); }
  .site-nav .btn { margin-top: 20px; }
  .hero { background: radial-gradient(ellipse 90% 40% at 50% 70%, rgba(255, 253, 247, .85), rgba(255, 253, 247, 0) 72%); }
  .hero-grid, .split, .join-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-art { justify-self: start; width: min(100%, 480px); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .metrics li:nth-child(3) { padding-left: 0; border-left: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .pillars { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  .phases { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .statuses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-block, .statement { margin-top: 96px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .brand .logo { --lh: 40px; }
  .plates li { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 22px 0 26px; }
  .plates .plate { width: 176px; }
  .harness-parts { grid-template-columns: minmax(0, 1fr); }
  .harness-lede { padding-right: 0; }
  .harness .glyph { display: none; }
  .work { font-size: 18.5px; }
  .label-title { font-size: 17.5px; }
  .question { grid-template-columns: 32px minmax(0, 1fr); gap: 18px; }
  .question .glyph { width: 32px; height: 32px; }
  .statement { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .statement .glyph { width: 44px; height: 44px; }
  .status-table div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .statuses { grid-template-columns: minmax(0, 1fr); }
  .partners { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .partner { aspect-ratio: 16 / 9; }
  .foot-nav { flex-direction: column; gap: 24px; }
}