/* Lexend everywhere: headings, text and labels. Lexend is designed for reading ease (wide letters, open spacing).
   One file, loaded last. To go back to the original fonts, delete this file's <link> line in index.html. */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300..700&display=swap');
*, *::before, *::after {
  --serif: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  --display: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  --sans: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* Arabic pages: Lexend has no Arabic letters, so they use Cairo, the sans the Arabic pages already use */
html[dir="rtl"], html[dir="rtl"] *, html[dir="rtl"] *::before, html[dir="rtl"] *::after {
  --serif: Cairo, 'Lexend', system-ui, sans-serif !important;
  --display: Cairo, 'Lexend', system-ui, sans-serif !important;
  --sans: Cairo, 'Lexend', system-ui, sans-serif !important;
}

/* Research page: a softer, darker background so the essay reads clearly */
body.art-research:has(#research:not([hidden])) .art-layer { filter: blur(56px) brightness(.78) saturate(.85); }
body.art-research:has(#research:not([hidden])) .art-shade { background: linear-gradient(90deg, #0a172bcc, #0a172b99 58%, #0a172b70 100%); }

/* Text accents (labels, cues, current menu item) in pale champagne; every hyperlink in light baby blue. */
body.art-research { --text-sky: #f6e3cf; --link-blue: #b7c8da; }
body.art-research :is(.research-part, .research-status, .label, .embody-gate-kicker, .embody-read-first, .embody-role, .embody-waypoint, .embody-net-cue, .concept-cue),
body.art-research .plate :is(.caption-head, .plate-nav button[aria-current="step"], .plate-nav button[aria-current="step"] .n),
body.art-research .embody-gate-list a:is([aria-current="page"], :hover, :focus-visible),
body.art-research #embody.is-lab .embody-gate.is-current summary { color: var(--text-sky) !important; }
body.art-research :is(p, li, span, figcaption, h2, h3, dd, td) > a:not([class*="btn"]):not(.research-orb):not(.embody-node),
body.art-research :is(p, li, span) > a:not([class*="btn"]) > :is(i, span),
body.art-research :is(a, button).concept-link,
body.art-research .research-statement a,
body.art-research .plg-next-lab,
body.art-research a.email,
body.art-research .link-mark,
body.art-research .plate a { color: var(--link-blue) !important; text-decoration-color: #b7c8dab3 !important; }
body.art-research .plate .plate-nav button[aria-current="step"] { border-bottom-color: var(--text-sky) !important; }
body.art-research .site-nav a[aria-current=page], body.art-research .site-nav a:focus-visible { color: var(--text-sky) !important; text-shadow: 0 0 14px #f6e3cf66, 0 1px 8px #0006 !important; }

/* Explore buttons, the back button and the menu's glowing line in champagne too (circles and network stay peach) */
body.art-research .embody-explore-btn { border-color: #f6e3cf99 !important; color: #f6e3cf !important; text-shadow: 0 0 12px #f6e3cfaa !important; animation-name: embody-glow-champagne !important; }
body.art-research .embody-explore-btn:is(:hover, :focus-visible) { background: #f6e3cf22 !important; border-color: #f6e3cf !important; color: #fffaf3 !important; outline-color: #f6e3cf !important; }
body.art-research .embody-explore-btn[aria-pressed="true"] { background: #f6e3cf !important; border-color: #f6e3cf !important; color: #1b2433 !important; box-shadow: 0 0 22px #f6e3cf77 !important; animation: none !important; }
@keyframes embody-glow-champagne {
  0%, 100% { box-shadow: 0 0 12px #f6e3cf33, inset 0 0 10px #f6e3cf1a; }
  50% { box-shadow: 0 0 26px #f6e3cf7a, inset 0 0 14px #f6e3cf2e; }
}
body.art-research .embody-explore-back::before { color: #f6e3cf !important; }
body.art-research .embody-explore-back:is(:hover, :focus-visible) { border-color: #f6e3cf !important; color: #f6e3cf !important; outline-color: #f6e3cf !important; }
body.art-research .site-nav-glint { background: #f6e3cf !important; box-shadow: 0 0 12px #f6e3cfc4 !important; }

/* Project pages (Embodied physical learning, Sleep without biology, Crypt morphogenesis, Sleep-wake rhythms):
   a flat background in the sky blue of the first home photo (#4c667f), with light text. */
body.art-research:has(:is(#model, #sleep, #organoids, #circadian):not([hidden])) .art-layer { opacity: 0 !important; }
body.art-research:has(:is(#model, #sleep, #organoids, #circadian):not([hidden])) .art-shade { background: #4c667f !important; }
body.art-research:has(:is(#model, #sleep, #organoids, #circadian):not([hidden])) :is(#model, #sleep, #organoids, #circadian, .site-header, .site-footer),
body.art-research:has(:is(#model, #sleep, #organoids, #circadian):not([hidden])) :is(#model, #sleep, #organoids, #circadian, .site-header, .site-footer) * { color: #fff8ee !important; text-shadow: none !important; border-color: #fff8ee40 !important; }
body.art-research:has(:is(#model, #sleep, #organoids, #circadian):not([hidden])) :is(#model, #sleep, #organoids, #circadian) a,
body.art-research:has(:is(#model, #sleep, #organoids, #circadian):not([hidden])) :is(#model, #sleep, #organoids, #circadian) a * { color: #d3dfeb !important; text-decoration-color: #d3dfeb99 !important; }
body.art-research:has(:is(#model, #sleep, #organoids, #circadian):not([hidden])) .panel-scroll { color: #fff8ee !important; border-color: #fff8ee66 !important; background: #0a172b33 !important; }

/* Research page circles: the sky blue of the first home photo inside, with light labels */
body.art-research .research-orb-disc,
body.art-research .research-orb.is-done .research-orb-disc,
body.art-research .research-orb:is(:hover, :focus-visible, .is-lit) .research-orb-disc { background: #4c667f !important; }
body.art-research .research-orb-disc::after { width: 80% !important; height: 34% !important; top: 50% !important; background: radial-gradient(ellipse, #4c667ff2 0 55%, #4c667fb3 72%, transparent 100%) !important; opacity: 1 !important; }
body.art-research .research-orb-disc :is(.research-name, .research-role),
body.art-research .research-orb.is-done .research-name { color: #fff8ee !important; text-shadow: none !important; }

/* Circle figures fully visible (finished projects were dimmed to 42%), labels on a solid blue plate */
body.art-research .research-orb .research-orb-fig { opacity: .92 !important; filter: none !important; }
body.art-research .research-orb:is(:hover, :focus-visible, .is-lit) .research-orb-fig { opacity: 1 !important; filter: brightness(1.12) !important; }
body.art-research .research-orb-disc .research-name { text-shadow: 0 1px 8px #2b3d50 !important; }
/* More room for the projects: the title and Perspective sit further left, and the circles spread apart */
@media screen and (min-width:1050px) and (min-height:650px) {
  body.art-research #research { padding-inline: 28px !important; }
  body.art-research #research > .hero-title,
  body.art-research #research > .research-split { width: min(96rem, 100%) !important; }
  body.art-research #research .research-perspective { flex: 1.45 1 0 !important; }
  body.art-research #research .research-projects { gap: 34px 44px !important; }
}

/* Research circles: the figure fills the circle; the title sits underneath and gives way to the question on hover */
body.art-research .research-orb { display: grid !important; justify-items: center; align-content: start; row-gap: 10px; }
body.art-research .research-orb > .research-status { grid-row: 1; }
body.art-research .research-orb > .research-orb-disc { grid-row: 2; }
body.art-research .research-orb > :is(.research-name, .research-q) { grid-row: 3; grid-column: 1; align-self: start; transition: opacity .3s ease; }
body.art-research .research-orb-disc::after { display: none !important; }
body.art-research .research-orb > .research-name { position: static !important; font: 600 15px/1.3 var(--sans) !important; color: #fff8ee !important; text-shadow: 0 1px 8px #0a172bcc !important; opacity: 1; }
body.art-research .research-orb > .research-q { opacity: 0 !important; }
body.art-research .research-orb:is(:hover, :focus-visible, .is-lit) > .research-name { opacity: 0 !important; }
body.art-research .research-orb:is(:hover, :focus-visible, .is-lit) > .research-q { opacity: 1 !important; }

/* Research circles: champagne behind the figure (the page stays blue), all four alike, a little smaller, no "Active" tag */
body.art-research .research-orb-disc,
body.art-research .research-orb:is(.is-done, .is-active) .research-orb-disc,
body.art-research .research-orb:is(:hover, :focus-visible, .is-lit) .research-orb-disc { background: #f6e3cf !important; border-color: #f6e3cf !important; box-shadow: 0 0 0 1px #f6e3cf66, 0 0 22px #f6e3cf55, 0 14px 36px #0005 !important; }
body.art-research .research-orb > .research-status { display: none !important; }
body.art-research .research-orb:is(.is-done, .is-active) .research-orb-fig { opacity: 1 !important; filter: none !important; }

body.art-research .research-orb:is(.is-done, .is-active) > .research-name { color: #fff8ee !important; }
@media screen and (min-width:1050px) and (min-height:650px) {
  body.art-research #research .research-orb { max-width: 150px !important; }
}
/* The Perspective rail and its travelling glow: champagne all the way (it still had peach in the middle) */
body.art-research .research-rail-glow { background: linear-gradient(to bottom, transparent 0%, #f6e3cfb8 24%, #f6e3cf 64%, #fbf1e6 84%, transparent 100%) !important; }
body.art-research .research-rail-glow::after { background: #fbf1e6 !important; }

/* Research circles: dark blue behind the figures */
body.art-research .research-orb-disc,
body.art-research .research-orb:is(.is-done, .is-active) .research-orb-disc,
body.art-research .research-orb:is(:hover, :focus-visible, .is-lit) .research-orb-disc { background: #14233d !important; border-color: #f6e3cf55 !important; box-shadow: 0 0 0 1px #f6e3cf40, 0 0 18px #f6e3cf33, 0 14px 36px #0005 !important; }



/* Live simulation inside a research circle (orb-live.js) */
body.art-research .research-orb-disc .orb-live { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
body.art-research .research-orb.is-live .orb-live { opacity: 1; }
body.art-research .research-orb.is-live .research-orb-fig { opacity: 0 !important; }

/* Research circles: no fill of their own; the screen's background shows behind the figures, inside a soft outline */
body.art-research .research-orb-disc,
body.art-research .research-orb:is(.is-done, .is-active) .research-orb-disc,
body.art-research .research-orb:is(:hover, :focus-visible, .is-lit) .research-orb-disc { background: transparent !important; border-color: #f6e3cf66 !important; box-shadow: none !important; }
body.art-research .research-orb:is(:hover, :focus-visible, .is-lit) .research-orb-disc { border-color: #f6e3cf !important; box-shadow: 0 0 0 1px #f6e3cf40, 0 0 18px #f6e3cf33 !important; }
body.art-research .research-orb-disc::after { background: none !important; }

/* Perspective: a thinner travelling glow; the text column starts further left and runs longer (the title stays put) */
body.art-research .research-rail-glow { width: 2px !important; filter: drop-shadow(0 0 2px #f6e3cf88) !important; }
body.art-research .research-rail-glow::after { width: 3.5px !important; height: 3.5px !important; box-shadow: 0 0 2px #f6e3cfaa !important; }
@media screen and (min-width:1050px) and (min-height:650px) {
  body.art-research #research .research-perspective { flex: 1.65 1 0 !important; }
}