/* Research and People pages. Same scale as the home: 48, 36, 28, 18, 16, 15, 13. */
.nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.jump { grid-column: 1 / -1; justify-content: flex-start; padding: 24px 0 0; gap: 6px; }
.jump .pill { display: inline-flex; align-items: center; box-shadow: var(--shadow-btn); background: var(--white); }
.jump .pill:hover { background: var(--cream); }
.dir-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.direction-page { scroll-margin-top: 72px; }

/* direction body: prose left, the papers right */
.body-row { align-items: start; row-gap: 32px; }
/* a direction's plate on the research page (plate() in scripts/build-pages.mjs): its colours
   blended like the paper covers, a line drawing of what it studies, and the grain over both */
.plate { grid-column: 1 / -1; position: relative; height: 400px; border-radius: var(--r-sheet); overflow: hidden; isolation: isolate;
  background: radial-gradient(55% 60% at 22% 35%, var(--b) 0, transparent 70%), radial-gradient(70% 60% at 85% 110%, var(--d) 0, transparent 70%),
    linear-gradient(160deg, var(--a), var(--c)); }
.plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate .grain { z-index: 2; }
.prose { grid-column: 1 / span 6; padding-left: var(--inset); display: grid; gap: 16px; max-width: 60ch; }
.prose p { font: 400 16px/26px var(--body); color: var(--ink-2); }
.body-row .side { grid-column: 8 / span 5; }
.works .row { display: grid; gap: 2px; padding: 14px 18px; border-bottom: 1px solid var(--stone); }
.works .row:last-child { border-bottom: 0; }
.works .row b { font: 400 15px/22px var(--body); }
.works .row span { font: 400 13px/18px var(--body); color: var(--muted); }
.works.plain { box-shadow: none; background: transparent; border-radius: 0; }
.works.plain a, .works.plain .row { padding-inline: 0; }
.archive .col { grid-column: span 6; padding-inline: var(--inset); min-width: 0; }

/* people */
.pi { align-items: center; row-gap: 32px; }
.pi-photo { grid-column: 1 / span 4; padding-left: var(--inset); }
.pi-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); background: var(--cream); }
.pi-copy { grid-column: 6 / span 7; display: grid; gap: 14px; justify-items: start; }
.pi-copy .btns { margin-top: 8px; }
.groups { display: grid; gap: 40px; padding-bottom: 40px; }
.col-title span { margin-left: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.people-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.person { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--stone); min-width: 0; }
.person img, .person .initial { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--cream); }
.person .initial { display: block; overflow: hidden; box-shadow: inset 0 0 0 .5px var(--ring); }
/* no photo: a grey silhouette on a grey disc */
.nophoto { display: block; width: 100%; height: 100%; fill: var(--faint); opacity: .55; }
.person .initial, .pc-faces i { background: var(--stone); }
.person b { display: block; font: 400 16px/24px var(--body); }
.person span span, .person > span > span { display: block; font: 400 13px/18px var(--body); color: var(--muted); }

@media (max-width: 900px) {
  .prose, .body-row .side, .archive .col { grid-column: 1 / -1; padding-left: 0; padding-inline: 0; }
  .plate { height: 240px; }
  .pi-photo { grid-column: 1 / span 6; padding-left: 0; } .pi-copy { grid-column: 1 / -1; }
  .people-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .people-grid { grid-template-columns: 1fr; }
  .pi-photo { grid-column: 1 / -1; max-width: 280px; }
  .jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

/* brand */
.bk-tiles { row-gap: 12px; }
.bk-tile { grid-column: span 3; background: var(--cream); border-radius: var(--r-card); box-shadow: inset 0 0 0 .5px var(--ring); min-height: 320px; display: grid; place-items: center; padding: 32px; min-width: 0; }
.bk-wide { grid-column: span 6; }
.bk-full { grid-column: 1 / -1; min-height: 280px; }
.bk-half { grid-column: span 6; min-height: 200px; }
.bk-dark { background: #0b0b0c; }
.bk-cons { width: min(100%, 360px); height: auto; }
.bk-space { width: min(100%, 520px); height: auto; color: var(--ink); }
.bk-formal { display: flex; align-items: center; justify-content: center; gap: 32px; }
.bk-formal .bl-logo { flex-shrink: 1; min-width: 0; }
.bk-formal p { font: 400 20px/1.3 var(--body); color: var(--ink-2); margin: 0; }
.bk-rule { width: 1px; align-self: stretch; max-height: 76px; margin-block: auto; background: var(--ink); opacity: .2; }
.bk-sizes { grid-column: span 6; display: flex; gap: 56px; align-items: flex-end; justify-content: center; }
.bk-sizes div { display: grid; justify-items: center; gap: 12px; }
.bk-sizes span, .bk-k { font: 400 13px/18px var(--body); color: var(--muted); white-space: nowrap; }
.bk-swatches, .bk-donts, .bk-files { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0 var(--inset); }
.bk-swatches { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.bk-swatches li { display: grid; gap: 4px; align-content: start; font: 400 13px/18px var(--body); color: var(--muted); }
.bk-chip { height: 120px; border-radius: var(--r-card); box-shadow: inset 0 0 0 .5px var(--ring); margin-bottom: 8px; }
.bk-swatches b { font: 400 15px/22px var(--body); color: var(--ink); }
.bk-swatches code, .bk-files code { font: 400 13px/18px "Geist Mono", monospace; color: var(--ink-2); }
.bk-type { place-items: start; align-content: space-between; grid-column: span 4; min-height: 240px; }
.bk-t1 { font: 400 32px/1.1 var(--display); letter-spacing: -.02em; margin: 0; }
.bk-t2 { font: 400 16px/26px var(--body); color: var(--ink-2); margin: 0; }
.bk-t3 { font: 400 15px/22px "Geist Mono", monospace; margin: 0; }
.bk-donts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bk-donts li { display: grid; gap: 10px; font: 400 13px/18px var(--body); color: var(--muted); }
.bk-donts div { aspect-ratio: 1; background: var(--cream); border-radius: var(--r-card); display: grid; place-items: center; position: relative; box-shadow: inset 0 0 0 .5px var(--ring); }
.bk-donts div::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1.5px; background: #b3261e; transform: rotate(-35deg); opacity: .8; }
.bk-donts svg { width: 46%; height: auto; overflow: visible; }
.bk-files li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--stone); align-items: baseline; }
.bk-files a { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.bk-files a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.bk-files b { font: 400 16px/24px var(--body); }
.bk-files span { font: 400 14px/22px var(--body); color: var(--muted); }
@media (max-width: 900px) {
  .bk-tile, .bk-wide, .bk-half, .bk-type, .bk-sizes { grid-column: 1 / -1; }
  .bk-swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bk-donts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-formal { flex-direction: column; gap: 16px; } .bk-rule { display: none; } .bk-formal p { text-align: center; }
}
@media (max-width: 640px) {
  .bk-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-donts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-files li { grid-template-columns: 1fr; gap: 4px; }
}

/* home: the featured paper as a card with a glass pearl in it */
.paper-card { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: center; text-align: center; padding: 40px 32px 36px; background: var(--cream); }
.paper-card .k { font: 400 13px/18px var(--body); color: var(--muted); }
.paper-card .pc-title { font: 400 22px/1.25 var(--body); margin-top: 6px; }
.paper-card .pc-pearl { width: min(42%, 220px); align-self: center; }
.paper-card .pc-meta { font: 400 14px/21px var(--body); color: var(--muted); max-width: 40ch; margin-inline: auto; }
.mini .mini-orb { width: 40px; height: 40px; }
/* every direction card's question takes three lines, so the four titles sit on one line */
.quad .mini .cap .d { min-height: 66px; }
.panel.steps { left: 50%; top: 64px; transform: translateX(-50%); width: min(440px, 84%); }
.panel.steps ol { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.panel.steps li { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--stone); }
.panel.steps li:first-child { border-top: 0; }
.panel.steps li img { width: 18px; height: 18px; margin-top: 2px; grid-row: span 2; display: block; }
.panel.steps b { font: 400 15px/22px var(--body); }
.panel.steps span { font: 400 13px/19px var(--body); color: var(--muted); }
/* the three people cards on the home page: two lines each, so their titles share a line */
.tri .line-card .cap .d { min-height: 44px; }
.apirow .links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.wall .m[hidden] { display: none; }

/* publications */
.pub-group[hidden], .pub[hidden], .sep[hidden], .wrap[hidden] { display: none; }
.pub-tools[hidden] { display: none; }
.pub-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: center; }
.pub-search { flex: 0 1 320px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; margin-right: 8px; border-radius: 9999px; background: var(--cream); box-shadow: inset 0 0 0 .5px var(--ring); color: var(--muted); }
.pub-search:focus-within { background: var(--white); box-shadow: inset 0 0 0 1px var(--faint); }
.pub-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 400 14px/1 var(--body); color: var(--ink); }
.pub-search input::placeholder { color: var(--faint); }
/* the order and area: plain text with a small chevron, a native menu underneath */
.pub-pick { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 9999px; color: var(--ink); cursor: pointer; }
.pub-pick:hover { background: var(--stone); }
.pub-pick select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: 400 14px/1 var(--body); color: inherit; padding-right: 16px; cursor: pointer; outline: none; }
.pub-pick:focus-within { box-shadow: inset 0 0 0 1px var(--faint); }
.pub-pick svg { position: absolute; right: 12px; pointer-events: none; color: var(--muted); }
.pub-none p { font: 400 16px/24px var(--body); color: var(--muted); }
@media (max-width: 640px) { .pub-search { flex-basis: 100%; margin-right: 0; } }
.pub-cover { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--cream); box-shadow: 0 0 0 .5px var(--ring); }
.pub-cover img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.h3 .count, .pub-group .count { color: var(--faint); font-variant-numeric: tabular-nums; margin-left: 6px; }
.pubs, .news-list, .opps { list-style: none; margin: 0; padding-bottom: 24px; }
.pub { display: grid; grid-template-columns: 112px minmax(0, 7fr) minmax(0, 5fr); gap: 32px; padding: 20px 0; border-top: 1px solid var(--stone); align-items: start; }
.pub[hidden] { display: none; }
.pub-main { display: grid; gap: 4px; }
.pub-main b { font: 400 17px/25px var(--body); }
.pub-main .by { font: 400 14px/20px var(--body); color: var(--ink-2); }
.pub-main .brief { font: 400 14px/21px var(--body); color: var(--muted); margin-top: 4px; max-width: 70ch; }
.pub-side { display: grid; gap: 6px; align-content: start; font: 400 14px/20px var(--body); color: var(--muted); }
.pub-side .pub-dirs { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.pub-side .pub-dirs span { display: inline-flex; align-items: center; gap: 7px; }
.pub-side .pub-dirs img { width: 16px; height: 16px; display: block; }
.pub-links { display: flex; gap: 14px; flex-wrap: wrap; }
.pub-links a, .news-list a, .opps a:not(.btn), .prose-inline a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }

/* news */
.news-list li { display: grid; grid-template-columns: 140px minmax(0, 1fr) 80px; gap: 24px; padding: 18px 0; border-top: 1px solid var(--stone); scroll-margin-top: 80px; }
.news-list .when, .news-list .kind { font: 400 14px/22px var(--body); color: var(--muted); }
.news-list .kind { text-align: right; }
.news-list .what { display: grid; gap: 4px; }
.news-list b { font: 400 17px/25px var(--body); }
.news-list .what span { font: 400 15px/23px var(--body); color: var(--ink-2); max-width: 72ch; }
.news-list li:target { background: var(--cream); margin-inline: calc(-1 * var(--inset)); padding-inline: var(--inset); border-radius: var(--r-card); }

/* join */
.prose-inline p + p { margin-top: 10px; }
.opps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 20px 0; border-top: 1px solid var(--stone); align-items: start; }
.opps b { display: block; font: 400 17px/25px var(--body); }
.opps li > div > span { display: block; font: 400 15px/23px var(--body); color: var(--ink-2); max-width: 70ch; margin-top: 4px; }
.opp-body { font: 400 14px/22px var(--body); color: var(--muted); margin-top: 8px; display: grid; gap: 8px; max-width: 70ch; }
.opp-side { display: flex; gap: 10px; align-items: center; }
.opp-side .tag { font: 400 13px/18px var(--body); color: var(--muted); }

@media (max-width: 900px) {
  .pub { grid-template-columns: 84px minmax(0, 1fr); gap: 10px 16px; }
  .pub .pub-cover { grid-row: span 2; }
  .news-list li { grid-template-columns: 1fr; gap: 4px; }
  .news-list .kind { text-align: left; }
  .opps li { grid-template-columns: 1fr; }
}

/* the carousel holds one tab per research direction */

/* paper covers on the home page: one look per paper, in place of a citation block */
.cover { position: relative; height: 100%; min-height: 440px; border-radius: var(--r-card); overflow: hidden; isolation: isolate; }
.cover p { margin: 0; }
.cv-logo { display: block; width: 91px; height: 16px; color: currentColor; }
.cv-flow { display: grid; place-items: center; container-type: inline-size;
  background: radial-gradient(45% 40% at 86% 14%, rgba(246, 222, 230, .75) 0, transparent 70%), radial-gradient(55% 45% at 82% 96%, rgba(240, 214, 222, .8) 0, transparent 70%),
    linear-gradient(162deg, #d6aec0 0, #c48aa6 24%, #93436b 46%, #5e1838 62%, #8a3c62 76%, #d9b0c1 92%, #eccfd8 100%); }
/* the flow (flowCover in scripts/kit.mjs): rows of one height; row i steps in by --step and
   its wire drops from the head's rail at a point --drop further right than the row before */
.fl { --h: 50px; --gap: 22px; --step: 60px; --drop: 40px; --r: 12px; --line: rgba(255, 255, 255, .72);
  position: relative; z-index: 1; width: 86%; display: grid; gap: var(--gap); }
.fl-row { position: relative; display: flex; align-items: center; height: var(--h);
  padding-left: calc(var(--i) * var(--step)); padding-right: calc((var(--n) - var(--i)) * var(--drop)); }
.fl-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 0 28px; border-radius: 999px; flex: none;
  background: #fff; color: #0d0b0c; font: 500 17px/1 var(--body); letter-spacing: -.01em; white-space: nowrap; }
.fl-head .fl-pill { background: #0d0b0c; color: #fff; font-weight: 600; padding: 0 30px 0 24px; }
.fl-head .fl-pill svg { width: 18px; height: 22px; }
.fl-wire { position: relative; flex: 1; align-self: stretch; min-width: var(--r); }
/* a step's wire: along from its pill, then up to the rail */
.fl-wire::before { content: ""; position: absolute; left: 0; right: 0; bottom: 50%; top: calc(var(--h) / 2 - var(--i) * (var(--h) + var(--gap)));
  border: 1px solid var(--line); border-top: 0; border-left: 0; border-bottom-right-radius: var(--r); }
/* the rail: out from the head and round the corner into the last drop */
.fl-head .fl-wire::before { top: 50%; bottom: auto; height: var(--r); border: 1px solid var(--line); border-bottom: 0; border-left: 0; border-radius: 0 var(--r) 0 0; }
.fl-head { padding-right: 0; }
.fl-head .fl-wire { margin-left: 0; }
.fl-last .fl-wire::before { top: calc(var(--h) / 2 - var(--i) * (var(--h) + var(--gap)) + var(--r)); }
@container (max-width: 480px) {
  .fl { --h: 36px; --gap: 14px; --step: 22px; --drop: 20px; --r: 9px; width: 92%; }
  .fl-pill { font-size: 13px; padding: 0 16px; }
  .fl-head .fl-pill { padding: 0 18px 0 14px; }
  .fl-head .fl-pill svg { width: 14px; height: 17px; }
}
.cv-blue { color: #fff;
  background: radial-gradient(55% 45% at 28% 48%, #f0634a 0, transparent 70%), radial-gradient(45% 40% at 76% 56%, #ea8a62 0, transparent 70%),
    radial-gradient(60% 45% at 50% 100%, #5b3170 0, transparent 70%), linear-gradient(180deg, #2c7cc0 0, #4b86c6 20%, #b6566b 58%, #6a3a6e 100%); }
.cv-blue .cv-head { position: absolute; top: 28px; left: 32px; right: 32px; z-index: 1; }
.cv-blue .cv-k { font: 400 15px/20px var(--body); margin-top: 28px; opacity: .9; }
.cv-blue .cv-t { font: 400 32px/1.12 var(--display); letter-spacing: -.02em; margin-top: 6px; max-width: 18ch; }
.cv-blue .cv-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-sheet { display: grid; place-items: center; background: linear-gradient(180deg, #efecea, #e6e2de); }
/* the page is the reference's 350 x 444; type sits top left, the paint fills the page under a mask */
.cv-page { position: relative; width: min(60%, 320px); aspect-ratio: 350 / 444; background: #fff; border-radius: 10px; overflow: hidden; padding: 6% 6.5% 0; color: var(--ink);
  container-type: inline-size; box-shadow: 0 0 0 .5px var(--ring), 0 18px 40px -24px rgba(40, 20, 30, .35); }
.cv-page .cv-logo { width: 27cqw; height: 4.7cqw; }
.cv-page .cv-t { font: 400 10cqw/1.08 var(--display); letter-spacing: -.03em; margin-top: 7cqw; max-width: 11ch; text-wrap: balance; }
/* the pink orb's blend: light at the top left of each shape, deepening to plum at the bottom */
.cv-paint { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: radial-gradient(40% 22% at 72% 36%, #e2b3c9 0, rgba(226, 179, 201, 0) 100%), radial-gradient(45% 30% at 30% 62%, #c883a5 0, rgba(200, 131, 165, 0) 100%),
    radial-gradient(50% 28% at 88% 84%, #b6628c 0, rgba(182, 98, 140, 0) 100%), radial-gradient(60% 40% at 10% 100%, #91446a 0, rgba(145, 68, 106, 0) 100%),
    linear-gradient(172deg, #d59fb9 30%, #b6628c 62%, #9b4b72 100%); }
.cv-paint .grain { opacity: .7; }
.apirow .cite { margin-top: 20px; }
/* orb cover (orbCover in scripts/kit.mjs): a still orb on plain light ground, a conversation over it */
.cv-orb { background: var(--cream); container-type: inline-size; }
.cv-orb .cv-ball { position: absolute; left: 50%; top: 50%; width: min(58cqw, 330px); height: auto; aspect-ratio: 1; translate: -50% -50%; }
.cv-badge { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; z-index: 1; }
.cv-badge svg { width: 30px; height: 30px; }
.cv-say { position: relative; z-index: 2; width: fit-content; max-width: 290px; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--ink);
  font: 400 14px/20px var(--body); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(40, 20, 30, .25); }
.cv-them { position: absolute; left: 13%; top: 22%; max-width: 76%; background: var(--ink); color: var(--white); }
.cv-replies { position: absolute; right: 9%; bottom: 14%; max-width: 82%; display: grid; gap: 8px; justify-items: start; z-index: 2; }
@container (max-width: 480px) {
  .cv-orb .cv-ball { width: 74cqw; }
  .cv-say { font-size: 12.5px; line-height: 17px; padding: 8px 12px; max-width: 64cqw; }
  .cv-them { left: 5%; top: 9%; }
  .cv-replies { right: 5%; bottom: 7%; }
  .cv-badge { width: 52px; height: 52px; }
}
@media (max-width: 900px) { .cover { min-height: 360px; } .cv-blue .cv-t { font-size: 26px; } }
.cite-box { display: block; width: 100%; min-height: 160px; margin-top: 12px; font: 400 12px/18px var(--mono); border: 1px solid var(--rail); border-radius: 8px; padding: 10px; background: var(--white); }

/* small covers on the publications page (miniCover in scripts/build-pages.mjs): three looks,
   coloured by the paper's direction through --a, --b, --c and --d */
.mc { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 10px; box-shadow: 0 0 0 .5px var(--ring); }
.mc-logo { width: 9px; height: 11px; flex: none; }
.mc-t { font: 400 11px/1.18 var(--display); letter-spacing: -.01em; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.mc-art { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 50%; }
.mc .grain { z-index: 2; }
.mc-blue { color: #fff;
  background: radial-gradient(60% 45% at var(--x) var(--y), var(--b) 0, transparent 70%), radial-gradient(70% 50% at 50% 105%, var(--d) 0, transparent 70%),
    linear-gradient(var(--ang), var(--a), var(--c)); }
.mc-blue .mc-art { color: #fff; opacity: .8; bottom: 6px; }
.mc-sheet { background: #fff; color: var(--ink); }
.mc-paint { position: absolute; inset: 0; z-index: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: radial-gradient(55% 30% at 75% 45%, var(--b) 0, transparent 100%), radial-gradient(60% 40% at 20% 100%, var(--d) 0, transparent 100%), linear-gradient(170deg, var(--a) 35%, var(--c) 100%); }
.mc-paint .grain { opacity: .7; }
.mc-orb { background: var(--cream); color: var(--ink); }
.mc-orb { container-type: inline-size; }
/* a true circle sized from the cover's width, its top about halfway up */
.mc-ball { position: absolute; left: -22cqw; top: 62cqw; width: 160cqw; height: 160cqw; max-width: none; z-index: 0; }
.mc .mc-logo, .mc .mc-t { position: relative; z-index: 1; }
@media (max-width: 900px) { .mc-t { font-size: 10px; } }

/* the three news cards on the home page: a blend at dusk, a field of mirrored contour lines,
   and a sky over a forest floor with vertical streaks. Smaller centred titles. */
.news .art.nv span { font: 400 26px/1.18 var(--display); letter-spacing: -.02em; max-width: 15ch; padding: 0; }
.nv-0 { background: radial-gradient(55% 45% at 22% 18%, #8f93d0 0, transparent 70%), radial-gradient(55% 45% at 85% 15%, #b780a6 0, transparent 70%),
  radial-gradient(45% 35% at 45% 92%, #f2a245 0, transparent 70%), radial-gradient(60% 40% at 10% 80%, #d8604f 0, transparent 70%),
  linear-gradient(180deg, #a385b8 0, #b47b98 40%, #d77b62 72%, #e8894a 100%); }
.nv-1 { background:
  radial-gradient(40% 32% at 0 0, #ecdcae 0, transparent 100%),
  radial-gradient(42% 20% at 6% 48%, #f6b860 0, rgba(246, 184, 96, .55) 40%, transparent 100%),
  radial-gradient(45% 35% at 92% 82%, #d2602f 0, transparent 100%),
  radial-gradient(50% 30% at 6% 98%, #1e0d0b 0, transparent 100%),
  radial-gradient(60% 26% at 52% 62%, #4b2a22 0, transparent 100%),
  linear-gradient(180deg, #7c98ab 0, #8592a0 26%, #8a7276 46%, #6a3f31 66%, #3b1c16 100%); }
/* the lines show toward the edges and fade out around the title */
.nv-1 .nv-lines { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(closest-side, transparent 38%, #000 92%); mask-image: radial-gradient(closest-side, transparent 38%, #000 92%); }
/* sky over a forest: one soft vertical fade, a hazy horizon, no streaks */
.nv-2 { background: radial-gradient(60% 14% at 50% 44%, rgba(190, 205, 185, .45) 0, transparent 100%),
  linear-gradient(180deg, #c6d6e2 0, #b8cbd9 24%, #a9bcc6 36%, #8aa07a 46%, #5d7f3c 56%, #3b5f25 68%, #24441a 84%, #142b10 100%); }
@media (max-width: 640px) { .news .art.nv span { font-size: 24px; } }

/* the two cards under the timeline (pv-0 lattice, pv-1 waves) */
.post .art.pv { height: 190px; }
.post { align-content: start; grid-template-rows: auto 1fr; }
.research-more .l { align-self: stretch; align-content: space-between; }
.pv-0 { background: radial-gradient(28% 55% at 50% 50%, #e2524c 0, transparent 70%), radial-gradient(40% 70% at 88% 40%, #a35fb5 0, transparent 70%),
  linear-gradient(90deg, #2b3f9a 0, #4152a4 28%, #c0485a 50%, #9c5aa8 74%, #c28ac0 100%); }
.pv-1 { background: radial-gradient(35% 60% at 25% 20%, #4f4a12 0, transparent 70%), radial-gradient(30% 50% at 45% 70%, #b29a3c 0, transparent 70%),
  linear-gradient(90deg, #6f8a3a 0, #8a7b25 30%, #b7aa55 52%, #75a868 74%, #2f7650 100%); }
.pv .pv-lines { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: overlay; }
.post .t15 { font-size: 16px; line-height: 24px; padding: 16px 20px 22px; }

/* the field wall on the home page (fieldWall in scripts/build-pages.mjs). --c is a side column's
   width; the middle is a square as tall as a column's big slot, gap and small slot together. On
   a switch the side slots trade sizes over .65s (ease-in-out cubic), the photo leaving fades out
   in .32s and the one arriving fades in over .4s; the right column follows .18s behind the left,
   and the middle cross-fades over .4s. Timed from the elevenlabs.io wall, frame by frame. */
.fw { --g: var(--gutter); container-type: inline-size; }
.fw-grid { --c: calc((100cqw - 2.5 * var(--g)) / 3.5); --big: var(--c); --small: calc((var(--c) - var(--g)) / 2);
  display: grid; grid-template-columns: var(--c) 1fr var(--c); gap: var(--g); height: calc(1.5 * var(--c) + var(--g) / 2); }
.fw-col { position: relative; }
.fw-slot { position: absolute; width: var(--s); height: var(--s); border-radius: var(--r-card); overflow: hidden; background: var(--cream);
  box-shadow: inset 0 0 0 .5px var(--ring); transition: width .65s cubic-bezier(.65, 0, .35, 1), height .65s cubic-bezier(.65, 0, .35, 1); }
.fw[data-set="a"] .fw-slot { --s: var(--sa); }
.fw[data-set="b"] .fw-slot { --s: var(--sb); }
.fw-col.l .fw-slot { right: 0; } .fw-col.r .fw-slot { left: 0; }
.fw-slot.top { top: 0; } .fw-slot.bot { bottom: 0; }
.fw-mid { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--cream); }
.fw-layer { position: absolute; inset: 0; display: block; color: var(--white); opacity: 0; pointer-events: none; transition: opacity .32s linear; }
.fw-mid .fw-layer { transition-duration: .4s; }
.fw[data-set="a"] .fw-layer[data-set="a"], .fw[data-set="b"] .fw-layer[data-set="b"] { opacity: 1; pointer-events: auto; transition-duration: .4s; }
.fw-col.r .fw-slot, .fw-col.r .fw-layer { transition-delay: .18s; }
.fw-layer img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fw-layer .badge { position: absolute; left: 18px; top: 16px; z-index: 1; font: 500 13px/1 var(--body); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.fw-layer::before { content: ""; position: absolute; inset: 0 0 auto; height: 72px; z-index: 1; background: linear-gradient(rgba(0, 0, 0, .28), transparent); }
.fw-layer .cap .short { display: none; }
.fw-layer .cap { position: absolute; inset: auto 0 0; padding: 56px 18px 16px; z-index: 1; font: 400 14px/20px var(--body);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55)); text-wrap: balance; }
/* a set's card: the brand's colours as soft light under grain, its mark in white top left and the
   line at the foot, set like the photos' captions, as elevenlabs.io sets its partner cards */
.fw-card { background: radial-gradient(80% 70% at 95% 15%, var(--hot, transparent), transparent 75%), radial-gradient(120% 90% at 0% 0%, var(--b1), transparent 70%), radial-gradient(90% 80% at 90% 10%, var(--b3), transparent 70%), linear-gradient(160deg, var(--b2), var(--b3)); }
.fw-card::before { inset: 0; height: auto; background: url("assets/grain.webp") 0 0 / 256px 256px repeat; opacity: .4; mix-blend-mode: overlay; }
.fw-card .fw-logo { position: absolute; left: 24px; top: 24px; z-index: 1; height: 30px; width: auto; max-width: calc(100% - 48px); }
.fw-card .fw-logo.mit { height: 30px; } .fw-card .fw-logo.nasa { height: 24px; }
@media (max-width: 640px) {
  /* on a phone the wall drops its trading slots: the set's main photo full width, then its other
     two side by side, and the toggle crossfades them in place. No empty tiles. */
  .fw-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "m m" "l r"; height: auto; }
  .fw-mid { grid-area: m; aspect-ratio: 4 / 5; }
  .fw-col.l { grid-area: l; } .fw-col.r { grid-area: r; }
  .fw-col { height: auto; aspect-ratio: 1; }
  .fw-slot, .fw[data-set] .fw-slot { inset: 0; width: 100%; height: 100%; transition: none; background: transparent; }
  .fw-col.r .fw-layer { transition-delay: 0s; }
  .fw-col .fw-layer .cap .long { display: none; } .fw-col .fw-layer .cap .short { display: inline; }
  .fw-col .fw-layer.fw-card .cap { -webkit-line-clamp: 6; padding-top: 0; }
  /* side tiles are a third of the phone wide: shorter captions and a smaller mark */
  .fw-col .fw-layer .badge { left: 12px; top: 12px; font-size: 12px; }
  .fw-card .fw-logo { left: 12px; top: 12px; height: 18px; max-width: calc(100% - 24px); } .fw-card .fw-logo.mit { height: 18px; } .fw-card .fw-logo.nasa { height: 14px; }
  .fw-col .fw-layer .cap { padding: 40px 12px 0; border-bottom: 10px solid transparent; font-size: 12px; line-height: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .fw-slot, .fw-layer { transition: none; } }

/* research page: each direction's one-line reason first, then its projects as a list */
.prose .why { font: 400 18px/27px var(--body); color: var(--ink); }

/* the company ticker (companyTicker in scripts/build-pages.mjs, timing in main.js). Measured from
   the elevenlabs.io row: 44px tiles 16px apart, an outline 5px outside each; on a change the old
   tile greys in .25s, then the new one takes its colour over .3s; the old line wipes out left to
   right in .33s and the new one wipes in, also from the left, over .48s starting .28s later. */
@property --wp { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.tk-tiles { display: flex; gap: 16px; padding: 6px; flex: none; }
.tk-tile { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center;
  background: #d9d8d9; color: #fff; transition: background-color .25s linear; }
.tk-tile.on { background: var(--tc); transition: background-color .3s linear .3s; }
.tk-mark { width: 30px; height: 30px; }
.tk-mark.wide { width: 36px; height: 14px; }
.tk-mark path { fill: #fff; transition: fill .25s linear; }
.tk-tile.on .tk-mark .g1 { fill: var(--g1); } .tk-tile.on .tk-mark .g2 { fill: var(--g2); }
.tk-tile.on .tk-mark path { transition: fill .3s linear .3s; }
.tk-ring { position: absolute; inset: -6px; width: 56px; height: 56px; overflow: visible; pointer-events: none; }
.tk-ring path { fill: none; stroke: var(--tc); stroke-width: 1.6; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: opacity .15s linear; }
.tk-tile.on .tk-ring path { opacity: 1; }
.tk-text { display: grid; min-width: 0; }
.tk-line { grid-area: 1 / 1; display: grid; gap: 0; min-width: 0; visibility: hidden; }
.tk-line b { font: 500 15px/22px var(--body); }
.tk-line.on, .tk-line.off { visibility: visible; }
.tk-line.on { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wp) - 40%), transparent var(--wp)); mask-image: linear-gradient(90deg, #000 calc(var(--wp) - 40%), transparent var(--wp));
  animation: tk-in .48s linear .28s both; }
.tk-line.off:not(.on) { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--wp) - 40%), #000 var(--wp)); mask-image: linear-gradient(90deg, transparent calc(var(--wp) - 40%), #000 var(--wp));
  animation: tk-out .33s linear both; }
@keyframes tk-in { from { --wp: 0%; } to { --wp: 140%; } }
@keyframes tk-out { from { --wp: 0%; } to { --wp: 140%; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .tk-tile, .tk-line { transition: none; animation: none !important; -webkit-mask-image: none !important; mask-image: none !important; } .tk-line.off:not(.on) { visibility: hidden; } }

/* ---------- links into the paper pages ---------- */
.apirow .l a.title { color: inherit; text-decoration: none; justify-self: start; }
.apirow .l a.title:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint); }
.apirow .row-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.apirow .row-btns .cite { margin-top: 0; }
.pub { position: relative; }
.pub-main .pub-link { font: 400 17px/25px var(--body); color: var(--ink); text-decoration: none; }
.pub-main .pub-link::after { content: ""; position: absolute; inset: 0; }
.pub:hover .pub-link { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--faint); }
.person { scroll-margin-top: 96px; }
.person:target b { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- a paper's page ----------
   The site's own parts only: the 12-column grid, the h1 and lede sizes, the buttons, the rail
   lines. A head (back link, where the paper stands, title, authors, buttons), the photo, then
   label-and-text rows split 3 / 9 like the API rows on the home page. */
.pp-top { align-items: end; }
.pp-head { grid-column: 1 / span 7; display: grid; gap: 16px; justify-items: start; }
.pp-back { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/20px var(--body); color: var(--muted); text-decoration: none; margin-bottom: 16px; }
.pp-back:hover { color: var(--ink); }
.pp-line { font: 400 15px/22px var(--body); color: var(--muted); }
.pp-title { font-size: 56px; line-height: 60px; letter-spacing: -1.4px; }
.pp-sub { display: block; margin-top: 12px; font: 400 24px/32px var(--display); letter-spacing: -.4px; color: var(--muted); }
.pp-by { font: 400 16px/24px var(--body); color: var(--ink-2); max-width: 60ch; }
.pp-by a, .pp-facts a, .pp-src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.pp-by a:hover, .pp-facts a:hover, .pp-src a:hover { text-decoration-color: currentColor; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pp-actions .btn svg { margin-left: 2px; }
/* the cover sits beside the title, the size of a card, so the paper itself starts on the first screen */
figure.pp-cover { grid-column: 8 / -1; margin: 0; }
figure.pp-cover img { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); background: var(--cream); }
.pp-row { padding-block: 40px; border-top: 1px solid var(--rail); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.pp-row.pt-xl { margin-top: 56px; padding-top: 40px; }
.pp-k { grid-column: 1 / span 3; padding-inline: var(--inset); font: 400 15px/24px var(--body); color: var(--muted); }
.pp-v { grid-column: 4 / span 8; min-width: 0; }
.pp-brief { font: 400 24px/34px var(--display); letter-spacing: -.3px; color: var(--ink); text-wrap: pretty; }
.pp-abstract { font: 400 16px/27px var(--body); color: var(--ink-2); max-width: 70ch; text-wrap: pretty; }
.pp-abstract + .pp-abstract { margin-top: 14px; }
.pp-abstract b { font-weight: 500; color: var(--ink); }
.pp-src { margin-top: 12px; font: 400 13px/20px var(--body); color: var(--faint); }
.pp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.pp-facts dt { font: 400 13px/20px var(--body); color: var(--muted); }
.pp-facts dd { margin: 4px 0 0; font: 400 15px/23px var(--body); color: var(--ink); overflow-wrap: anywhere; }
.pp-cite { font: 400 15px/24px var(--body); color: var(--ink); max-width: 70ch; overflow-wrap: anywhere; }
.pp-bib { margin: 20px 0 16px; padding: 16px 18px; background: var(--cream); border-radius: 12px; font: 400 12px/19px var(--mono); color: var(--ink-2); overflow-x: auto; }
.pp-bib .k { color: var(--muted); }
.pp-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.pp-card { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.pp-card .pp-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--cream); margin-bottom: 8px; }
.pp-card img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.pp-card:hover img { transform: scale(1.03); }
.pp-card b { font: 400 17px/24px var(--body); }
.pp-card span:not(.pp-img) { font: 400 14px/20px var(--body); color: var(--muted); }
@media (max-width: 900px) {
  .pp-head { grid-column: 1 / -1; }
  figure.pp-cover { grid-column: 1 / -1; margin-top: 32px; }
  figure.pp-cover img { aspect-ratio: 2 / 1; }
  .pp-title { font-size: 44px; line-height: 48px; }
  .pp-k { grid-column: 1 / -1; margin-bottom: 8px; }
  .pp-v { grid-column: 1 / -1; padding-inline: var(--inset); }
}
@media (max-width: 640px) {
  .pp-title { font-size: 36px; line-height: 40px; letter-spacing: -.9px; }
  .pp-sub { font-size: 19px; line-height: 26px; }
  .pp-brief { font-size: 20px; line-height: 29px; }
  .pp-facts { grid-template-columns: 1fr; }
  .pp-cards { grid-template-columns: 1fr; }
  .pp-actions .btn { height: 40px; padding: 0 16px; font-size: 15px; }
  /* on a phone the paper comes first; its cover still shows in the cards below */
  figure.pp-cover { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pp-card img { transition: none; } }

.archive .col { scroll-margin-top: 96px; }

/* ---------- a direction's papers and projects ----------
   Papers are rows with the paper's photo as a small rounded thumbnail, the short title and one
   muted line, each kept to a single line, and an arrow on hover. Projects are soft cream
   cards with the team's faces. */
.wk-list { display: grid; }
.wk-list .col-title { margin-bottom: 8px; }
.wk { display: grid; grid-template-columns: 52px minmax(0, 1fr) 12px; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--stone); color: var(--ink); text-decoration: none; }
.wk-list .col-title + .wk { border-top: 0; }
.wk-img { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: radial-gradient(80% 80% at 25% 20%, color-mix(in srgb, var(--tone) 45%, white), var(--tone)); }
.wk-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.wk-t { display: grid; gap: 2px; min-width: 0; }
.wk-t b { font: 400 15px/21px var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-t span { font: 400 13px/18px var(--body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-go { color: var(--faint); opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.wk:hover .wk-go, .wk:focus-visible .wk-go { opacity: 1; transform: none; color: var(--ink); }
.wk:hover .wk-img img { transform: scale(1.06); }
.wk:hover .wk-t b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }

.projects { row-gap: 16px; margin-top: -48px; }
.projects .col-title { grid-column: 1 / -1; padding-left: var(--inset); }
.pcards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gutter); }
.pcard { display: flex; flex-direction: column; gap: 8px; padding: 24px; min-height: 196px; background: var(--cream); border-radius: var(--r-card); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 .5px var(--ring); transition: background .2s var(--ease); }
a.pcard:hover { background: var(--stone); }
.pcard b { font: 400 17px/24px var(--body); }
.pc-sum { font: 400 15px/22px var(--body); color: var(--ink-2); text-wrap: pretty; }
.pc-team { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc-faces { display: flex; flex: none; }
.pc-faces img, .pc-faces i { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cream); background: var(--white); display: block; overflow: hidden; }
.pc-faces > * + * { margin-left: -8px; }
.pc-names { font: 400 13px/18px var(--body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pc-done { margin-left: auto; font: 400 13px/18px var(--body); color: var(--faint); flex: none; }
@media (max-width: 640px) { .projects .col-title { padding-left: 0; } .pcard { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .wk-img img, .wk-go { transition: none; } }