:root {
  --paper: #f4f2ed;
  --ink: #10284b;
  --blue: #166fc1;
  --line: #10284b;
  --bright: #54d1a8;
  --glitch-blue: #78c8e8;
  --bugs-red: #ff5a44;
  --bugs-cold: #67aeb9;
  --panel: #092c5b;
}
body { background: var(--paper); color: var(--ink); font: 19px/1.55 Georgia, serif; }
.navbar { display: none; }
#title-block-header { display: none; }
.entry-shell { max-width: 1280px; margin: auto; padding: 28px 36px 20px; }
.inner-page { max-width: 1280px; margin: auto; padding: 28px 36px 32px; }
.entry-mark { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 1.45rem; padding: 18px 0 16px; background: var(--paper); }
.entry-mark a { color: var(--ink); text-decoration: none; }
.site-short-name { font: 800 .72rem/1 Arial, sans-serif; letter-spacing: .045em; white-space: nowrap; }
.menu-toggle { display: none; }
.page-nav { display: flex; flex-wrap: wrap; gap: .7rem 1rem; }
.page-nav a { color: var(--ink); font: 800 .7rem/1 Arial, sans-serif; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.page-nav a:hover, .page-nav a:focus, .page-nav a[aria-current="page"] { color: var(--blue); text-decoration: underline; text-underline-offset: .3em; }
.entry-intro { max-width: none; margin: 78px auto 34px; }
.system-label { color: var(--blue); font: 700 11px Arial, sans-serif; letter-spacing: 1.6px; }
.entry-intro h1, .inner-page h1 { margin: 20px 0 34px; padding: 25px 31px; border-left: 14px solid var(--blue); background: var(--panel); color: #fff; font-family: Arial, sans-serif; font-weight: 800; line-height: .92; letter-spacing: -3px; }
.entry-intro h1 { max-width: 920px; font-size: clamp(44px, 6.2vw, 68px); }
.inner-page h1 { max-width: none; font-size: clamp(30px, 4vw, 44px); }
.entry-intro p { max-width: 810px; }
.home-bio-layout { max-width: 1040px; }
.home-bio-copy { min-width: 0; }
.home-bio-copy::after { display: table; clear: both; content: ""; }
.home-bio-copy p { max-width: none; }
.home-portrait { position: relative; float: right; width: 176px; margin: .15rem 0 1rem 2rem; border-bottom: 3px solid var(--ink); background: transparent; }
.home-portrait::before { position: absolute; z-index: 1; bottom: 0; left: -7px; width: 12px; height: 31%; background: var(--blue); content: ""; }
.home-portrait::after { position: absolute; z-index: 3; right: -4px; bottom: 0; width: 7px; height: 38%; background: var(--bright); content: ""; }
.home-portrait img { position: relative; z-index: 2; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 9%; }
.home-portrait img.home-portrait-shadow { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-portrait img.home-portrait-shadow-far { transform: translate(4px, 4px); opacity: .48; }
.home-portrait img.home-portrait-glitch { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.home-portrait.is-glitching .home-portrait-glitch { animation: portrait-signal .82s steps(1, end) both; }
.entry-intro a { padding: 4px 9px; background: var(--panel); color: #fff; text-decoration: none; transition: .25s; }
.entry-intro a:hover, .entry-intro a:focus { background: var(--blue); transform: translateY(-2px); }
.entry-intro .inline-play { position: relative; display: inline-grid; overflow: hidden; grid-template-areas: "inline-play"; isolation: isolate; vertical-align: baseline; }
.inline-play::before { position: absolute; z-index: 0; inset: 0; background: var(--bugs-red); content: ""; opacity: 0; pointer-events: none; }
.inline-play-layer { position: relative; grid-area: inline-play; }
.inline-play-base { z-index: 1; }
.inline-play-glitch { z-index: 2; opacity: 0; pointer-events: none; }
.inline-play-glitch-red { color: var(--bugs-red); }
.inline-play-glitch-blue { z-index: 3; color: var(--bugs-cold); }
.inline-play.is-glitching::before, .inline-play.is-glitching .inline-play-glitch-red { animation: route-play-signal-red .82s steps(1, end) both; }
.inline-play.is-glitching .inline-play-glitch-blue { animation: route-play-signal-blue .82s .04s steps(1, end) both; }
.bio-highlight { padding: 3px 7px; background: var(--panel); color: #fff; }
.route-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; max-width: 810px; margin: auto; padding-top: 38px; border-top: 3px solid var(--line); }
.route-cells a { display: grid; min-height: 142px; place-content: center; border: 3px solid var(--line); color: var(--ink); font-family: Arial, sans-serif; text-align: center; text-decoration: none; transition: .27s; }
.route-cells b { font: 400 43px/1 Georgia, serif; }
.route-cells svg { width: 43px; height: 43px; margin: 0 auto; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 3; }
.route-cells > a > span, .route-play-layer > span { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.route-cells a:hover, .route-cells a:focus { background: var(--bright); box-shadow: 0 8px 0 var(--ink); transform: translateY(-8px); }
.route-play { position: relative; overflow: hidden; isolation: isolate; }
.route-play::before, .route-play::after { position: absolute; inset: 0; content: ""; opacity: 0; pointer-events: none; }
.route-play::before { z-index: 0; background: var(--bugs-red); }
.route-play::after { z-index: 1; background: var(--bugs-cold); }
.route-play-stack { position: relative; z-index: 2; display: grid; grid-template-areas: "play"; place-items: center; }
.route-play-layer { display: grid; grid-area: play; place-items: center; }
.route-play-glitch { opacity: 0; pointer-events: none; }
.route-play-glitch-red { color: var(--bugs-red); }
.route-play-glitch-blue { color: var(--bugs-cold); }
.route-play.is-glitching { animation: route-play-button-tilt .82s steps(1, end) both; }
.route-play.is-glitching::before { animation: route-play-signal-red .82s steps(1, end) both; }
.route-play.is-glitching::after { animation: route-play-signal-blue .82s .04s steps(1, end) both; }
.route-play.is-glitching .route-play-glitch-red { animation: route-play-signal-red .82s steps(1, end) both; }
.route-play.is-glitching .route-play-glitch-blue { animation: route-play-signal-blue .82s .04s steps(1, end) both; }
.flicker { display: grid; position: relative; width: 100%; max-width: 100%; grid-template-areas: "title"; transform-origin: 18% 60%; animation: title-signal-tilt 5.8s steps(1, end) infinite; }
.flicker > span { grid-area: title; min-width: 0; font: inherit; letter-spacing: inherit; line-height: inherit; white-space: inherit; }
.flicker-base { position: relative; z-index: 1; }
.flicker-overlay, .flicker-signal { position: relative; opacity: 0; pointer-events: none; }
.flicker-overlay { z-index: 2; color: var(--bright); animation: title-slice-mint 5.8s steps(1, end) infinite; }
.flicker-signal { z-index: 3; color: var(--glitch-blue); animation: title-slice-blue 5.8s steps(1, end) infinite; }
@keyframes page-scan { 0% { transform: scaleX(0); transform-origin: left; } 62% { transform: scaleX(1); transform-origin: left; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes masthead-reveal { from { clip-path: inset(0 100% 0 0); transform: translateX(-18px); } to { clip-path: inset(0 0 0 0); transform: translateX(0); } }
@keyframes content-settle { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-leave { from { opacity: 1; transform: translateY(0); } to { opacity: .35; transform: translateY(-4px); } }
body::before { position: fixed; z-index: 40; top: 0; right: 0; left: 0; height: 5px; background: var(--blue); content: ""; pointer-events: none; transform: scaleX(0); }
body.page-ready::before { animation: page-scan .68s cubic-bezier(.65, 0, .35, 1) both; }
body.page-ready .entry-intro h1, body.page-ready .inner-page h1 { animation: masthead-reveal .5s cubic-bezier(.2, .82, .22, 1) both; }
body.page-ready .entry-intro > :not(h1), body.page-ready .inner-page > :not(.entry-mark):not(.system-label):not(h1), body.page-ready .global-footer { animation: content-settle .38s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .16s; }
body.page-ready .inner-page > .system-label { animation: content-settle .24s ease-out both; }
body.page-leaving .entry-shell main, body.page-leaving .inner-page { animation: page-leave .18s ease-in both; }
.lede { max-width: 720px; font-size: 22px; }
.editorial-panels { display: grid; gap: 20px; margin-top: 52px; }
.editorial-panels article { min-height: 170px; padding: 28px; border: 4px solid var(--line); transition: .28s; }
.editorial-panels article:hover { background: var(--bright); transform: translateX(8px); }
.editorial-panels h2 { margin: 0; font: 800 32px/.95 Arial, sans-serif; }
.editorial-panels a { color: var(--ink); font: 800 16px Arial, sans-serif; text-underline-offset: 5px; }
.course-links { display: grid; gap: .7rem; margin-top: 1.35rem; }
.course-webpages { margin: 1.35rem 0 0; color: var(--blue); font: 800 12px Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.course-links > div { display: grid; grid-template-columns: 6.3rem max-content max-content; align-items: center; column-gap: 1.1rem; row-gap: .4rem; }
.course-year { min-width: 5.8rem; color: var(--blue); font: 800 13px Arial, sans-serif; letter-spacing: .04em; }
.course-links a { display: inline-flex; align-items: center; gap: .4rem; padding-bottom: .12rem; border-bottom: 3px solid currentColor; text-decoration: none; white-space: nowrap; }
.research-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 52px; max-width: 1100px; margin-top: 3.4rem; }
.research-map article { padding: 1.4rem 0 2.2rem; border-top: 3px solid var(--line); }
.research-map .research-wide { grid-column: 1 / -1; }
.research-map .research-ontology { grid-column: 1 / -1; margin-top: .9rem; padding: 1.5rem 1.7rem 2rem; border: 0; border-left: 8px solid var(--blue); background: #dce9ed; }
.research-map h2 { max-width: 720px; margin: .35rem 0 .7rem; font: 800 clamp(27px, 3.2vw, 40px)/1 Arial, sans-serif; letter-spacing: -.04em; }
.research-map p { max-width: 680px; margin: 0; }
.research-map a { color: var(--ink); font-weight: 700; text-underline-offset: .24em; }
@keyframes title-slice-mint { 0%, 77%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); } 79% { opacity: .82; clip-path: inset(10% 0 64% 0); transform: translate(-7px); } 83% { opacity: .68; clip-path: inset(45% 0 26% 0); transform: translate(6px); } 87% { opacity: .76; clip-path: inset(3% 0 78% 0); transform: translate(-5px); } 91% { opacity: .7; clip-path: inset(66% 0 9% 0); transform: translate(7px); } 95% { opacity: .58; clip-path: inset(27% 0 42% 0); transform: translate(-6px); } 98% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); } }
@keyframes title-slice-blue { 0%, 78%, 100% { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate(0); } 80% { opacity: .5; clip-path: inset(68% 0 11% 0); transform: translate(5px); } 84% { opacity: .64; clip-path: inset(18% 0 67% 0); transform: translate(-4px); } 88% { opacity: .52; clip-path: inset(52% 0 30% 0); transform: translate(6px); } 92% { opacity: .6; clip-path: inset(7% 0 82% 0); transform: translate(-3px); } 96% { opacity: .45; clip-path: inset(38% 0 48% 0); transform: translate(4px); } 99% { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate(0); } }
@keyframes title-signal-tilt { 0%, 77%, 100% { transform: rotate(0); } 80% { transform: rotate(-.35deg); } 86% { transform: rotate(.24deg); } 92% { transform: rotate(-.18deg); } 98% { transform: rotate(0); } }
@keyframes route-play-signal-red { 0% { opacity: .86; clip-path: inset(10% 0 64% 0); transform: translate(-7px); } 18% { opacity: .78; clip-path: inset(45% 0 26% 0); transform: translate(6px); } 36% { opacity: .82; clip-path: inset(3% 0 78% 0); transform: translate(-5px); } 56% { opacity: .74; clip-path: inset(66% 0 9% 0); transform: translate(7px); } 76% { opacity: .68; clip-path: inset(27% 0 42% 0); transform: translate(-6px); } 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate(0); } }
@keyframes route-play-signal-blue { 0% { opacity: .72; clip-path: inset(68% 0 11% 0); transform: translate(5px); } 22% { opacity: .7; clip-path: inset(18% 0 67% 0); transform: translate(-4px); } 43% { opacity: .68; clip-path: inset(52% 0 30% 0); transform: translate(6px); } 68% { opacity: .64; clip-path: inset(7% 0 82% 0); transform: translate(-3px); } 86% { opacity: .58; clip-path: inset(38% 0 48% 0); transform: translate(4px); } 100% { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate(0); } }
@keyframes route-play-button-tilt { 0%, 100% { rotate: 0deg; } 20% { rotate: -.7deg; } 48% { rotate: .5deg; } 72% { rotate: -.36deg; } }
@keyframes portrait-signal { 0% { opacity: .35; clip-path: inset(10% 0 64% 0); filter: none; transform: translate(-7px, 0); } 18% { opacity: .42; clip-path: inset(45% 0 26% 0); filter: sepia(1) saturate(5) hue-rotate(105deg) brightness(1.08); transform: translate(6px, 0); } 36% { opacity: .30; clip-path: inset(3% 0 78% 0); filter: none; transform: translate(-5px, 0); } 56% { opacity: .38; clip-path: inset(66% 0 9% 0); filter: sepia(1) saturate(5) hue-rotate(105deg) brightness(1.08); transform: translate(7px, 0); } 76% { opacity: .27; clip-path: inset(27% 0 42% 0); filter: none; transform: translate(-6px, 0); } 100% { opacity: 0; clip-path: inset(0 0 100% 0); filter: none; transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 1100px) { .route-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1000px; } }
@media (max-width: 960px) { .entry-intro h1, .inner-page h1 { padding: 18px 14px; font-size: clamp(13px, 4vw, 38px); letter-spacing: -.07em; white-space: nowrap; } }
@media (max-width: 700px) { body { font-size: 16px; } .entry-shell, .inner-page { padding: 10px; } .entry-mark { justify-content: space-between; gap: 0; padding: 12px 0 10px; } .site-short-name { font-size: .72rem; } .menu-toggle { display: inline-flex; align-items: center; gap: .48rem; border: 0; padding: .28rem 0; color: var(--ink); background: transparent; font: 800 .64rem/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .menu-toggle i, .menu-toggle i::before, .menu-toggle i::after { display: block; width: 1.25rem; height: 2px; background: currentColor; content: ""; } .menu-toggle i { position: relative; } .menu-toggle i::before, .menu-toggle i::after { position: absolute; left: 0; } .menu-toggle i::before { top: -5px; } .menu-toggle i::after { top: 5px; } .page-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1rem 10px 1.15rem; border-bottom: 2px solid color-mix(in srgb, var(--ink) 22%, transparent); background: var(--paper); } .page-nav[data-open="true"] { display: flex; } .page-nav a { font-size: .68rem; } .entry-intro { margin-top: 34px; } .entry-intro h1, .inner-page h1 { margin: 14px 0 22px; padding: 18px 16px; border-left-width: 10px; font-size: clamp(30px, 9vw, 48px); line-height: .95; letter-spacing: -.06em; white-space: normal; } .flicker { display: grid; width: 100%; white-space: normal; } .route-cells { grid-template-columns: repeat(2, 1fr); gap: 10px; padding-top: 24px; } .route-cells a { min-height: 96px; } .route-cells b { font-size: 36px; } .route-cells svg { width: 36px; height: 36px; } .route-cells span { font-size: 12px; } .research-map { grid-template-columns: 1fr; gap: 0; } .research-map .research-wide { grid-column: auto; } .course-links > div { grid-template-columns: 1fr 1fr; } .course-year { grid-column: 1 / -1; } .lede { font-size: 17px; } .schematic-stage { min-height: 250px; } .schematic-stage svg { height: 250px; } .scheme-node { font-size: .56rem; } .node-questions, .node-methods { left: 1%; }.node-models, .node-ontology { right: 1%; } }

/* Compact navigation is intentionally isolated from Quarto's button rules. */
@media (max-width: 700px) {
  .home-portrait { float: none; width: min(42vw, 172px); margin: .25rem auto 1.85rem; }
  .home-portrait.is-glitching .home-portrait-glitch { animation-duration: .72s; }
  .entry-mark { display: grid; grid-template-columns: minmax(0, 1fr) auto; position: sticky; }
  .entry-mark > .site-short-name { display: block; max-width: 9.5rem; overflow: hidden; color: var(--ink) !important; font: 800 .62rem/1 Arial, sans-serif !important; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
  .entry-mark > .menu-toggle { display: grid !important; width: 2.35rem; height: 2.35rem; place-items: center; margin: 0; padding: 0; border: 2px solid var(--ink) !important; border-radius: 0; outline: none; box-shadow: none !important; color: var(--ink) !important; background: transparent !important; font: inherit !important; -webkit-appearance: none; appearance: none; cursor: pointer; }
  .entry-mark > .menu-toggle:hover, .entry-mark > .menu-toggle:focus-visible { color: var(--paper) !important; background: var(--ink) !important; }
  .entry-mark > .menu-toggle i, .entry-mark > .menu-toggle i::before, .entry-mark > .menu-toggle i::after { width: 1.1rem; height: 2px; background: currentColor; }
  .entry-mark > .page-nav { position: absolute; top: calc(100% - 1px); right: 0; left: 0; display: none !important; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 10px .75rem; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper); box-shadow: 0 7px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
  .entry-mark > .page-nav[data-open="true"] { display: flex !important; }
  .entry-mark > .page-nav a { display: block; padding: .66rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); font: 800 .68rem/1 Arial, sans-serif; }
  .entry-mark > .page-nav a:last-child { border-bottom: 0; }
}