@charset "UTF-8"; /* Perceptual color system ----------------------- Keep sRGB values as a compatibility floor, then opt modern browsers into OkLCh palette values and Oklab mixing. OkLCh makes lightness adjustments visually predictable; Oklab keeps translucent interaction states even. */ :root, html[data-bs-theme="light"] { --color-canvas: #eff4ff; --color-text: #212529; --color-heading: #12253f; --color-subheading: #324862; --color-muted: #5d7088; --color-link: #286dc0; --color-link-strong: #16365c; --color-accent-vivid: #286dc0; --color-control-bg: rgba(239, 244, 255, 0.94); --color-control-hover: #194f91; --color-control-border: rgba(77, 101, 139, 0.23); --color-control-surface: rgba(255, 255, 255, 0.34); --color-control-fg: #31527b; --color-control-hover-bg: rgba(49, 82, 123, 0.13); --color-control-hover-fg: #1e395c; --color-control-selected-bg: #31527b; --color-control-selected-fg: #ffffff; --accent-06: rgba(40, 109, 192, 0.06); --accent-08: rgba(40, 109, 192, 0.08); --accent-10: rgba(40, 109, 192, 0.1); --accent-12: rgba(40, 109, 192, 0.12); --accent-14: rgba(40, 109, 192, 0.14); --accent-15: rgba(40, 109, 192, 0.15); --accent-16: rgba(40, 109, 192, 0.16); --accent-18: rgba(40, 109, 192, 0.18); --accent-20: rgba(40, 109, 192, 0.2); --accent-22: rgba(40, 109, 192, 0.22); --accent-24: rgba(40, 109, 192, 0.24); --accent-25: rgba(40, 109, 192, 0.25); --accent-28: rgba(40, 109, 192, 0.28); --accent-32: rgba(40, 109, 192, 0.32); --accent-35: rgba(40, 109, 192, 0.35); --accent-40: rgba(40, 109, 192, 0.4); --accent-45: rgba(40, 109, 192, 0.45); --canvas-gradient: radial-gradient(circle at 12% 18%, rgba(255,255,255,0.95) 0%, rgba(225,238,255,0.86) 38%, transparent 68%), radial-gradient(circle at 82% 12%, rgba(210,225,255,0.38) 0%, transparent 52%), linear-gradient(145deg, rgba(241,247,255,0.92) 0%, rgba(220,233,255,0.9) 42%, rgba(206,220,255,0.82) 100%); --canvas-gradient-size: auto, 120% 120%, auto; } html[data-bs-theme="dark"] { --color-canvas: #0c1624; --color-text: rgba(255, 255, 255, 0.88); --color-heading: rgba(250, 250, 250, 0.93); --color-subheading: rgba(250, 250, 250, 0.93); --color-muted: #c6c6c6; --color-link: #82afe5; --color-link-strong: #d2e5fb; --color-accent-vivid: #5a96ff; --color-control-bg: rgba(20, 38, 70, 0.94); --color-control-hover: #d2e5fb; --color-control-border: rgba(166, 195, 243, 0.34); --color-control-surface: rgba(255, 255, 255, 0.05); --color-control-fg: rgba(232, 239, 255, 0.92); --color-control-hover-bg: rgba(255, 255, 255, 0.14); --color-control-hover-fg: #ffffff; --color-control-selected-bg: rgba(225, 235, 255, 0.92); --color-control-selected-fg: #17243a; --accent-06: rgba(90, 150, 255, 0.06); --accent-08: rgba(90, 150, 255, 0.08); --accent-10: rgba(90, 150, 255, 0.1); --accent-12: rgba(90, 150, 255, 0.12); --accent-14: rgba(90, 150, 255, 0.14); --accent-15: rgba(90, 150, 255, 0.15); --accent-16: rgba(90, 150, 255, 0.16); --accent-18: rgba(90, 150, 255, 0.18); --accent-20: rgba(90, 150, 255, 0.2); --accent-22: rgba(90, 150, 255, 0.22); --accent-24: rgba(90, 150, 255, 0.24); --accent-25: rgba(90, 150, 255, 0.25); --accent-28: rgba(90, 150, 255, 0.28); --accent-32: rgba(90, 150, 255, 0.32); --accent-35: rgba(90, 150, 255, 0.35); --accent-40: rgba(90, 150, 255, 0.4); --accent-45: rgba(90, 150, 255, 0.45); --canvas-gradient: radial-gradient(circle at 18% 12%, rgba(34,56,96,0.82) 0%, transparent 48%), radial-gradient(circle at 82% 18%, rgba(21,38,68,0.65) 0%, transparent 52%), linear-gradient(150deg, #0b1320 0%, #0f1c2f 55%, #162842 100%); --canvas-gradient-size: 135% 135%, 120% 120%, auto; } @supports (color: oklch(50% 0.1 250)) and (color: color-mix(in oklab, white, black)) { :root, html[data-bs-theme="light"] { --color-canvas: oklch(96.66% 0.0157 266.3); --color-text: oklch(26.21% 0.0095 248.2); --color-heading: oklch(26.31% 0.0551 256.7); --color-subheading: oklch(39.52% 0.0522 253.2); --color-muted: oklch(53.88% 0.0441 254.4); --color-link: oklch(53.57% 0.1468 255.3); --color-link-strong: oklch(33.01% 0.0774 254.4); --color-accent-vivid: oklch(53.57% 0.1468 255.3); --color-control-bg: color-mix(in oklab, var(--color-canvas) 94%, transparent); --color-control-hover: oklch(43.01% 0.1224 255.8); --color-control-border: color-mix(in oklab, oklch(46.23% 0.0363 254.5) 23%, transparent); --color-control-surface: color-mix(in oklab, white 34%, transparent); --color-control-fg: oklch(43.30% 0.0787 254.6); --color-control-hover-bg: color-mix(in oklab, var(--color-control-fg) 13%, transparent); --color-control-hover-fg: oklch(34.75% 0.071 254.8); --color-control-selected-bg: var(--color-control-fg); --color-control-selected-fg: oklch(100% 0 0); --canvas-gradient: radial-gradient(circle at 12% 18% in oklab, oklch(100% 0 0 / 0.95) 0%, oklch(94.45% 0.0269 255.1 / 0.86) 38%, transparent 68%), radial-gradient(circle at 82% 12% in oklab, oklch(90.79% 0.0442 264.3 / 0.38) 0%, transparent 52%), linear-gradient(145deg in oklab, oklch(97.39% 0.0125 255.5 / 0.92) 0%, oklch(93.10% 0.033 261 / 0.9) 42%, oklch(89.51% 0.0505 268.1 / 0.82) 100%); } html[data-bs-theme="dark"] { --color-canvas: oklch(19.84% 0.032 256.9); --color-text: oklch(100% 0 0 / 0.88); --color-heading: oklch(98.51% 0 0 / 0.93); --color-subheading: oklch(98.51% 0 0 / 0.93); --color-muted: oklch(82.66% 0 0); --color-link: oklch(74.24% 0.0924 253.5); --color-link-strong: oklch(91.46% 0.0363 252.1); --color-accent-vivid: oklch(68.23% 0.1676 260.8); --color-control-bg: color-mix(in oklab, oklch(27.1% 0.0605 261) 94%, transparent); --color-control-hover: oklch(91.46% 0.0363 252.1); --color-control-border: color-mix(in oklab, oklch(82% 0.065 255) 34%, transparent); --color-control-surface: color-mix(in oklab, white 5%, transparent); --color-control-fg: oklch(94% 0.024 264 / 0.92); --color-control-hover-bg: color-mix(in oklab, white 14%, transparent); --color-control-hover-fg: oklch(100% 0 0); --color-control-selected-bg: oklch(94.45% 0.0269 255.1 / 0.92); --color-control-selected-fg: oklch(25.8% 0.044 259); --canvas-gradient: radial-gradient(circle at 18% 12% in oklab, oklch(34.40% 0.0758 261.5 / 0.82) 0%, transparent 48%), radial-gradient(circle at 82% 18% in oklab, oklch(27.10% 0.0605 261 / 0.65) 0%, transparent 52%), linear-gradient(150deg in oklab, oklch(18.61% 0.0294 259.8) 0%, oklch(22.52% 0.0416 257.8) 55%, oklch(27.56% 0.0541 257.6) 100%); } :root, html[data-bs-theme="light"], html[data-bs-theme="dark"] { --accent-06: color-mix(in oklab, var(--color-accent-vivid) 6%, transparent); --accent-08: color-mix(in oklab, var(--color-accent-vivid) 8%, transparent); --accent-10: color-mix(in oklab, var(--color-accent-vivid) 10%, transparent); --accent-12: color-mix(in oklab, var(--color-accent-vivid) 12%, transparent); --accent-14: color-mix(in oklab, var(--color-accent-vivid) 14%, transparent); --accent-15: color-mix(in oklab, var(--color-accent-vivid) 15%, transparent); --accent-16: color-mix(in oklab, var(--color-accent-vivid) 16%, transparent); --accent-18: color-mix(in oklab, var(--color-accent-vivid) 18%, transparent); --accent-20: color-mix(in oklab, var(--color-accent-vivid) 20%, transparent); --accent-22: color-mix(in oklab, var(--color-accent-vivid) 22%, transparent); --accent-24: color-mix(in oklab, var(--color-accent-vivid) 24%, transparent); --accent-25: color-mix(in oklab, var(--color-accent-vivid) 25%, transparent); --accent-28: color-mix(in oklab, var(--color-accent-vivid) 28%, transparent); --accent-32: color-mix(in oklab, var(--color-accent-vivid) 32%, transparent); --accent-35: color-mix(in oklab, var(--color-accent-vivid) 35%, transparent); --accent-40: color-mix(in oklab, var(--color-accent-vivid) 40%, transparent); --accent-45: color-mix(in oklab, var(--color-accent-vivid) 45%, transparent); } } :root { --max-measure: 68ch; /* comfortable line length */ --glass-bg-primary: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); --glass-border-primary: rgba(255,255,255,.16); --glass-shadow-primary: 0 14px 30px rgba(15,38,70,.09); --glass-highlight-top: rgba(255,255,255,.28); --glass-highlight-bottom: var(--accent-12); --glass-highlight-bottom-radius: 70%; --glass-fallback-bg: rgba(255,255,255,.88); --glass-fallback-shadow: 0 12px 26px rgba(15,38,70,.08); --glass-sheen-primary: rgba(255,255,255,.38); --glass-sheen-soft: rgba(255,255,255,.2); --glass-accent-primary: var(--accent-20); --glass-accent-secondary: rgba(142,190,255,.16); --glass-spectrum: linear-gradient(120deg, rgba(255,168,88,.13) 0%, rgba(110,188,255,.11) 46%, rgba(164,120,255,.13) 100%); --surface-hero-bg: linear-gradient(135deg, rgba(255,255,255,.78), rgba(234,240,252,.58)); --surface-hero-border: var(--accent-14); --surface-hero-shadow: 0 0.55rem 1.45rem rgba(12,32,67,.08); --surface-section-bg: linear-gradient(135deg, rgba(255,255,255,.74), rgba(236,242,255,.5)); --surface-section-border: var(--accent-12); --surface-section-shadow: 0 0.45rem 1.2rem rgba(12,32,67,.065); --surface-card-bg: linear-gradient(135deg, rgba(255,255,255,.76), rgba(240,245,255,.54)); --surface-card-border: var(--accent-12); --surface-card-shadow: 0 0.4rem 1.05rem rgba(12,32,67,.06); } /* CSS Document */ .caption { font-family: "Chaparral Pro Caption", "Chaparral Pro Fallback", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 0.9rem; font-weight: 400; margin-top: 0.5em; margin-bottom: 1em; } strong { font-weight: 600; } li:not(:last-child) { margin-bottom: .4em; } html { background-color: var(--color-canvas); background-image: var(--canvas-gradient); background-size: var(--canvas-gradient-size); } body { font-family: "Chaparral Pro", "Chaparral Pro Fallback", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size-adjust: 0.415; line-height: 1.55; font-kerning: normal; font-weight: 400; font-size: 17px; background: transparent; } #content, .site-footer, #back-to-top { position: relative; z-index: 0; } .icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: middle; } #pronounce-btn { --bs-btn-padding-y: 0.35rem; --bs-btn-padding-x: 0.55rem; display: inline-flex; align-items: center; justify-content: center; gap: 0; line-height: 1; color: var(--bs-secondary-color); border-color: currentColor; } #pronounce-btn .icon { font-size: 1.35rem; width: 1em; height: 1em; flex-shrink: 0; transition: transform 0.2s ease; } #pronounce-btn:hover .icon, #pronounce-btn:focus-visible .icon { transform: scale(1.08); } html[data-bs-theme="dark"] #pronounce-btn { color: var(--bs-gray-200) !important; border-color: var(--bs-gray-400) !important; } html[data-bs-theme="dark"] #pronounce-btn:hover, html[data-bs-theme="dark"] #pronounce-btn:focus-visible, html[data-bs-theme="dark"] #pronounce-btn:active { color: var(--bs-body-bg) !important; background-color: var(--bs-gray-200) !important; border-color: var(--bs-gray-200) !important; } .site-theme-toggle { position: relative; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--color-control-border); background: var(--color-control-surface); color: var(--color-control-fg); box-shadow: 0 0.2rem 0.65rem rgba(12, 32, 67, 0.08); vertical-align: middle; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } .theme-switcher__trigger, .theme-switcher__option { border: 0; border-radius: 999px; background: transparent; color: inherit; line-height: 1; display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .theme-switcher__trigger svg, .theme-switcher__option svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .theme-switcher__current-icon { display: inline-grid; } .theme-switcher__current-icon svg { display: none; grid-area: 1 / 1; } .theme-switcher[data-theme-mode="light"] [data-theme-icon="light"], .theme-switcher[data-theme-mode="dark"] [data-theme-icon="dark"], .theme-switcher[data-theme-mode="auto"] [data-theme-icon="auto"] { display: block; } .theme-switcher__choices { position: absolute; z-index: 20; top: calc(100% + 0.5rem); right: 0; display: inline-flex; gap: 0.08rem; padding: 0.16rem; border: 1px solid var(--color-control-border); border-radius: 999px; background: rgba(250, 252, 255, 0.94); box-shadow: 0 0.45rem 1.1rem rgba(12, 32, 67, 0.14); opacity: 0; pointer-events: none; transform: translateY(-0.25rem) scale(0.96); transform-origin: top right; transition: opacity 150ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* Keep the visible gap traversable when choosing a theme with a mouse. */ .theme-switcher__choices::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 0.5rem; } @media (max-width: 640px) { .theme-switcher__choices { left: 0; right: auto; transform-origin: top left; } } .theme-switcher:hover .theme-switcher__choices, .theme-switcher:focus-within .theme-switcher__choices, .theme-switcher.is-expanded .theme-switcher__choices { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .theme-switcher__trigger:hover, .theme-switcher__trigger:focus-visible, .theme-switcher__option:hover, .theme-switcher__option:focus-visible { background: var(--color-control-hover-bg); color: var(--color-control-hover-fg); } .theme-switcher__trigger:focus-visible, .theme-switcher__option:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .theme-switcher__option[aria-pressed="true"] { background: var(--color-control-selected-bg); color: var(--color-control-selected-fg); box-shadow: 0 0.12rem 0.3rem rgba(12, 32, 67, 0.14); } html[data-bs-theme="dark"] .site-theme-toggle { border-color: var(--color-control-border); background: var(--color-control-surface); color: var(--color-control-fg); box-shadow: 0 0.25rem 0.75rem rgba(3, 7, 18, 0.25); } html[data-bs-theme="dark"] .theme-switcher__choices { border-color: var(--color-control-border); background: rgba(24, 37, 59, 0.96); box-shadow: 0 0.45rem 1.1rem rgba(3, 7, 18, 0.4); } html[data-bs-theme="dark"] .theme-switcher__option[aria-pressed="true"] { background: var(--color-control-selected-bg); color: var(--color-control-selected-fg); } html[data-bs-theme="dark"] .theme-switcher__trigger:hover, html[data-bs-theme="dark"] .theme-switcher__trigger:focus-visible, html[data-bs-theme="dark"] .theme-switcher__option:hover, html[data-bs-theme="dark"] .theme-switcher__option:focus-visible { background: var(--color-control-hover-bg); color: var(--color-control-hover-fg); } .site-style-toggle { display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; padding: 0; border: 1px solid var(--color-control-border); border-radius: 999px; background: var(--color-control-surface); color: var(--color-control-fg); box-shadow: 0 0.2rem 0.65rem rgba(12, 32, 67, 0.08); line-height: 1; vertical-align: middle; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .site-style-toggle:hover, .site-style-toggle:focus-visible { background: var(--color-control-hover-bg); border-color: var(--color-control-border); color: var(--color-control-hover-fg); transform: translateY(-1px); } .site-style-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } html[data-bs-theme="dark"] .site-style-toggle { border-color: var(--color-control-border); background: var(--color-control-surface); color: var(--color-control-fg); box-shadow: 0 0.25rem 0.75rem rgba(3, 7, 18, 0.25); } html[data-bs-theme="dark"] .site-style-toggle:hover, html[data-bs-theme="dark"] .site-style-toggle:focus-visible { background: var(--color-control-hover-bg); border-color: var(--color-control-border); color: var(--color-control-hover-fg); } .style-toggle-icon { display: none; width: 1.05rem; height: 1.05rem; } /* Show the icon for the layout the button will switch to. */ .site-style-toggle[data-style-mode="rich"] .style-toggle-icon--minimal, .site-style-toggle[data-style-mode="minimal"] .style-toggle-icon--rich { display: block; } :root { --vspace: 1.25rem; /* base vertical rhythm */ } /* Smooth scrolling for in-page anchors */ html { scroll-behavior: smooth; } .text-center p { text-align: center !important; } .question { font-weight: bold; } .meta { font-size: .88em; color: #555; } span.authors { font-style: italic; font-size: .9em; } span.venue { font-feature-settings: "smcp" 1; font-size: .9em; } .clear-both { clear: both; } a { color: #C0F; transition: color .15s ease, text-decoration-color .15s ease; text-decoration-skip-ink: auto; text-decoration-thickness: 0.06em; text-underline-offset: 0.15em; } p { text-align: left; margin: 0 0 1rem; } a { color: #286dc0; } a:hover, a:focus { color: #286dc0; } a:hover { color: #f14e32; text-decoration-color: #286dc0; } /* Default: show text on the left, headshot on the right */ #header { display: flex; gap: 2rem; align-items: center; justify-content: space-between; } /* Remove the floats the old layout used */ #heading, #headshot { float: none !important; } /* Keep the headshot a sensible size and add a little padding */ #headshot img { max-width: 220px; height: auto; border: 2px solid #ddd; border-radius: 10px; } #headshot { float: right; margin-bottom: 15px; border-style: solid; border-radius: 10px; } @media (max-width: 640px) { #header { flex-direction: column; text-align: center; } #headshot { margin: 0.1rem auto 0.1rem; } } h2, h3, h4, h5 { font-family: "Chaparral Pro", "Chaparral Pro Fallback", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-weight: 600; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; font-optical-sizing: auto; hyphens: auto; max-width: calc(var(--max-measure) * 0.95); } #heading h5 { margin-top: .3em; font-weight: 300; color: #666; } #heading > .site-theme-toggle, #heading > .site-style-toggle { position: relative; top: -0.15rem; } #heading h1 { font-size: 3rem; line-height: 1.1; margin: 0; font-weight: 400; font-synthesis: none; font-family: "Chaparral Pro Display", "Chaparral Pro Fallback", "Chaparral Pro", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; } h2 { font-size: 1.85rem; color: #666; } h3 { font-size: 1.45rem; } h4 { font-size: 1.25rem; } h5 { font-weight: 300; color: #666; } #information { clear: both; } .content { width: min(92vw, 1000px); margin-left: auto; margin-right: auto; } #socialmedia { display: inline-block; float: right; } #socialmedia * img { display: inline; } #contact { display: inline-block; float: left; } li:not(:last-child) { margin-bottom: 5px; } @media (prefers-color-scheme: light) { .btn:hover { color: #00000085; } } .alert-dismissible { padding-right: 0.5rem; } .alert-dismissible .btn-close { position: relative; padding: unset; padding-left: 1rem; } /* On phone screens, avoid justification in impact alerts (not bio banner) */ @media (max-width: 560px) { .alert:not(.bio-alert), .alert:not(.bio-alert) p { text-align: left; } } .btn-bib { font-weight: 600; border-color: #3081d1; font-size: 0.8125rem; transition: background .15s ease; border: 1px solid #3081d1; font-family: "Chaparral Pro", "Chaparral Pro Fallback", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; border-radius: 4px; } @media (prefers-color-scheme: light) { .btn-bib { background: transparent; } .btn-bib:hover { background: rgba(48, 129, 209, 0.62); } } .btn-bib:focus, .btn-bib:active { outline: 2px solid rgba(48, 129, 209, 0.6); outline-offset: 2px; } @view-transition { navigation: auto; } #heading { view-transition-name: site-heading; } #content { view-transition-name: site-content; } .site-footer { view-transition-name: site-footer; } ::view-transition-group(root), ::view-transition-group(site-heading), ::view-transition-group(site-content), ::view-transition-group(site-footer) { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } html[data-view-transition="page"]::view-transition-old(site-heading) { animation: none; opacity: 0; } html[data-view-transition="page"]::view-transition-new(site-heading) { animation: none; opacity: 1; } html[data-view-transition="page"]::view-transition-old(site-content) { animation: 180ms ease both view-transition-page-out; } html[data-view-transition="page"]::view-transition-new(site-content) { animation: 280ms cubic-bezier(0.22, 1, 0.36, 1) both view-transition-page-in; } html[data-view-transition="theme"]::view-transition-new(root), html[data-view-transition="theme"]::view-transition-new(site-heading), html[data-view-transition="theme"]::view-transition-new(site-content), html[data-view-transition="theme"]::view-transition-new(site-footer), html[data-view-transition="style"]::view-transition-new(root), html[data-view-transition="style"]::view-transition-new(site-heading), html[data-view-transition="style"]::view-transition-new(site-content), html[data-view-transition="style"]::view-transition-new(site-footer) { animation: 420ms cubic-bezier(0.22, 1, 0.36, 1) both view-transition-reveal; clip-path: circle(150vmax at var(--view-transition-x, 50%) var(--view-transition-y, 50%)); mix-blend-mode: normal; } html[data-view-transition="theme"]::view-transition-old(root), html[data-view-transition="theme"]::view-transition-old(site-heading), html[data-view-transition="theme"]::view-transition-old(site-content), html[data-view-transition="theme"]::view-transition-old(site-footer), html[data-view-transition="style"]::view-transition-old(root), html[data-view-transition="style"]::view-transition-old(site-heading), html[data-view-transition="style"]::view-transition-old(site-content), html[data-view-transition="style"]::view-transition-old(site-footer) { animation: none; mix-blend-mode: normal; } @keyframes view-transition-page-out { to { opacity: 0; transform: translateY(-0.35rem); } } @keyframes view-transition-page-in { from { opacity: 0; transform: translateY(0.55rem); } } @keyframes view-transition-reveal { from { clip-path: circle(0 at var(--view-transition-x, 50%) var(--view-transition-y, 50%)); } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(root), ::view-transition-group(site-heading), ::view-transition-group(site-content), ::view-transition-group(site-footer), ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(site-heading), ::view-transition-new(site-heading), ::view-transition-old(site-content), ::view-transition-new(site-content), ::view-transition-old(site-footer), ::view-transition-new(site-footer) { animation: none !important; } } .liquid-glass { position: relative; background: var(--glass-bg, var(--glass-bg-primary)); border: 1px solid var(--glass-border, var(--glass-border-primary)); border-radius: 18px; box-shadow: var(--glass-shadow, var(--glass-shadow-primary)), inset 0 0.5px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.07); overflow: hidden; isolation: isolate; } /* Keep one physical rim and mix its color perceptually. A second border-box background would bleed through the translucent fill; the single rim keeps both the material and its rounded contour clean. */ @supports (color: color-mix(in oklab, white, black)) { .liquid-glass { border-color: color-mix(in oklab, white 12%, var(--glass-border, var(--glass-border-primary))); } } .liquid-glass > * { position: relative; z-index: 1; } .liquid-glass::before { content: ""; position: absolute; inset: -42% -32% auto -32%; height: 185%; background: var(--glass-spectrum), radial-gradient(ellipse at top, var(--glass-sheen-primary, rgba(255, 255, 255, 0.58)), transparent 55%), radial-gradient(circle at 15% 35%, var(--glass-sheen-soft, rgba(255, 255, 255, 0.28)), transparent 55%), radial-gradient(circle at 75% 28%, var(--glass-sheen-soft, rgba(255, 255, 255, 0.28)), transparent 60%); opacity: .27; pointer-events: none; transform: translate3d(0, 0, 0); mix-blend-mode: soft-light; filter: blur(0); z-index: 0; } .liquid-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(68% 9% at 24% 0%, var(--glass-highlight-top, rgba(255, 255, 255, 0.32)), transparent 76%), radial-gradient(11% 54% at 100% 16%, var(--glass-highlight-bottom, rgba(40, 109, 192, 0.16)), transparent 78%); mix-blend-mode: screen; opacity: .28; z-index: 0; } @media (prefers-reduced-motion: reduce) { .liquid-glass::before, .liquid-glass::after { animation: none !important; } } @media (prefers-contrast: more) { .liquid-glass { box-shadow: none; border-color: rgba(40, 109, 192, 0.4); --glass-spectrum: none; -webkit-mask-image: none; mask-image: none; } .liquid-glass::before, .liquid-glass::after { opacity: .18; mix-blend-mode: normal; } } @media (forced-colors: active) { .liquid-glass { background: Canvas !important; border: 1px solid CanvasText !important; box-shadow: none !important; --glass-spectrum: none; -webkit-mask-image: none !important; mask-image: none !important; } .liquid-glass::before, .liquid-glass::after { display: none !important; } } @media print { .liquid-glass { background: #fff !important; border: 1px solid #bbb !important; box-shadow: none !important; --glass-spectrum: none; -webkit-mask-image: none !important; mask-image: none !important; } .liquid-glass::before, .liquid-glass::after { display: none !important; } } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]) .liquid-glass { background: var(--glass-bg, var(--glass-bg-primary)); border: 1px solid var(--glass-border, var(--glass-border-primary)); box-shadow: var(--glass-shadow, var(--glass-shadow-primary)); } :root:not([data-bs-theme]) .liquid-glass::before { opacity: .28; } :root:not([data-bs-theme]) .liquid-glass::after { opacity: .23; } } /* Use the explicit theme toggle (data-bs-theme) when present. */ html[data-bs-theme="dark"] .liquid-glass { background: var(--glass-bg, var(--glass-bg-primary)); border: 1px solid var(--glass-border, var(--glass-border-primary)); box-shadow: var(--glass-shadow, var(--glass-shadow-primary)), inset 0 0.5px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } @supports (color: color-mix(in oklab, white, black)) { html[data-bs-theme="dark"] .liquid-glass { border-color: color-mix(in oklab, white 8%, var(--glass-border, var(--glass-border-primary))); } } html[data-bs-theme="dark"] .liquid-glass::before { opacity: .28; } html[data-bs-theme="dark"] .liquid-glass::after { opacity: .23; } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]) { background-color: #0c1624; background-image: radial-gradient(circle at 18% 12%, rgba(34, 56, 96, 0.82) 0%, transparent 48%), radial-gradient(circle at 82% 18%, rgba(21, 38, 68, 0.65) 0%, transparent 52%), linear-gradient(150deg, #0b1320 0%, #0f1c2f 55%, #162842 100%); background-size: 135% 135%, 120% 120%, auto; } :root:not([data-bs-theme]) body { background: transparent; color: rgba(255, 255, 255, 0.88); } :root:not([data-bs-theme]) a { color: #82afe5; } :root:not([data-bs-theme]) h2, :root:not([data-bs-theme]) h3, :root:not([data-bs-theme]) h4, :root:not([data-bs-theme]) h5 { color: #fafafaee; } :root:not([data-bs-theme]) #heading h5 { color: #c6c6c6; } :root:not([data-bs-theme]) { --glass-bg-primary: linear-gradient(135deg, rgba(22,30,54,.62), rgba(8,12,22,.54)); --glass-border-primary: rgba(112,160,252,.13); --glass-shadow-primary: 0 15px 32px rgba(3,7,18,.3); --glass-sheen-primary: rgba(214,229,255,.22); --glass-sheen-soft: rgba(148,180,255,.13); --glass-accent-primary: rgba(90,161,255,.2); --glass-accent-secondary: rgba(132,184,255,.14); --glass-fallback-bg: rgba(15,18,32,.88); --glass-fallback-shadow: 0 15px 32px rgba(3,7,18,.28); --glass-spectrum: linear-gradient(130deg, rgba(255,140,80,.16) 0%, rgba(86,158,255,.17) 48%, rgba(122,98,255,.18) 100%); --surface-hero-bg: linear-gradient(135deg, rgba(90,161,255,.11), rgba(15,30,68,.24)); --surface-hero-border: rgba(102,150,255,.18); --surface-hero-shadow: 0 0.5rem 1.4rem rgba(5,12,28,.28); --surface-section-bg: linear-gradient(135deg, rgba(18,24,44,.7), rgba(10,16,32,.6)); --surface-section-border: rgba(102,150,255,.18); --surface-section-shadow: 0 0.5rem 1.4rem rgba(5,12,28,.28); --surface-card-bg: rgba(12,18,32,.68); --surface-card-border: rgba(102,150,255,.16); --surface-card-shadow: 0 0.4rem 1.1rem rgba(3,8,20,.34); } } html[data-bs-theme="dark"] body { background: transparent; color: var(--color-text); } html[data-bs-theme="dark"] a { color: var(--color-link); } html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3, html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5 { color: var(--color-heading); } html[data-bs-theme="dark"] #heading h5 { color: var(--color-muted); } html[data-bs-theme="dark"] { background-color: var(--color-canvas); background-image: var(--canvas-gradient); background-size: var(--canvas-gradient-size); --glass-bg-primary: linear-gradient(135deg, rgba(22,30,54,.62), rgba(8,12,22,.54)); --glass-border-primary: rgba(112,160,252,.13); --glass-shadow-primary: 0 15px 32px rgba(3,7,18,.3); --glass-sheen-primary: rgba(214,229,255,.22); --glass-sheen-soft: rgba(148,180,255,.13); --glass-accent-primary: var(--accent-20); --glass-accent-secondary: rgba(132,184,255,.14); --glass-fallback-bg: rgba(15,18,32,.88); --glass-fallback-shadow: 0 15px 32px rgba(3,7,18,.28); --glass-spectrum: linear-gradient(130deg, rgba(255,140,80,.16) 0%, rgba(86,158,255,.17) 48%, rgba(122,98,255,.18) 100%); --surface-hero-bg: linear-gradient(135deg, rgba(90,161,255,.11), rgba(15,30,68,.24)); --surface-hero-border: var(--accent-18); --surface-hero-shadow: 0 0.5rem 1.4rem rgba(5,12,28,.28); --surface-section-bg: linear-gradient(135deg, rgba(18,24,44,.7), rgba(10,16,32,.6)); --surface-section-border: var(--accent-18); --surface-section-shadow: 0 0.5rem 1.4rem rgba(5,12,28,.28); --surface-card-bg: rgba(12,18,32,.68); --surface-card-border: var(--accent-16); --surface-card-shadow: 0 0.4rem 1.1rem rgba(3,8,20,.34); } html[data-bs-theme="light"] body { background: transparent; color: var(--color-text); } html[data-bs-theme="light"] #heading h1 { color: var(--color-heading); } html[data-bs-theme="light"] h2, html[data-bs-theme="light"] h3, html[data-bs-theme="light"] h4 { color: var(--color-subheading); } html[data-bs-theme="light"] h5 { color: var(--color-muted); } html[data-bs-theme="light"] { background-color: var(--color-canvas); background-image: var(--canvas-gradient); background-size: var(--canvas-gradient-size); --glass-bg-primary: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); --glass-border-primary: rgba(255,255,255,.16); --glass-shadow-primary: 0 14px 30px rgba(15,38,70,.09); --glass-highlight-top: rgba(255,255,255,.28); --glass-highlight-bottom: var(--accent-12); --glass-highlight-bottom-radius: 70%; --glass-fallback-bg: rgba(255,255,255,.88); --glass-fallback-shadow: 0 12px 26px rgba(15,38,70,.08); --glass-sheen-primary: rgba(255,255,255,.38); --glass-sheen-soft: rgba(255,255,255,.2); --glass-accent-primary: var(--accent-20); --glass-accent-secondary: rgba(142,190,255,.16); --glass-spectrum: linear-gradient(120deg, rgba(255,168,88,.13) 0%, rgba(110,188,255,.11) 46%, rgba(164,120,255,.13) 100%); --surface-hero-bg: linear-gradient(135deg, rgba(255,255,255,.78), rgba(234,240,252,.58)); --surface-hero-border: var(--accent-14); --surface-hero-shadow: 0 0.55rem 1.45rem rgba(12,32,67,.08); --surface-section-bg: linear-gradient(135deg, rgba(255,255,255,.74), rgba(236,242,255,.5)); --surface-section-border: var(--accent-12); --surface-section-shadow: 0 0.45rem 1.2rem rgba(12,32,67,.065); --surface-card-bg: linear-gradient(135deg, rgba(255,255,255,.76), rgba(240,245,255,.54)); --surface-card-border: var(--accent-12); --surface-card-shadow: 0 0.4rem 1.05rem rgba(12,32,67,.06); } html[data-bs-theme="light"] #heading h5 { color: var(--color-muted); } @media (prefers-color-scheme: light) { .page-safe-and-sound .safe-and-sound-collapse { background: var(--accent-06); border-color: var(--accent-18); } } html[data-bs-theme="light"] .page-safe-and-sound .safe-and-sound-collapse { background: var(--accent-06); border-color: var(--accent-18); } /* Teaching page summary / collapsible overview */ .page-teaching .teaching-page { display: flex; flex-direction: column; gap: 2rem; } .page-teaching .lead { margin-bottom: 0; } .page-teaching .teaching-local-nav { display: inline-flex; flex-wrap: wrap; gap: 0.7rem 1.25rem; padding: 0.2rem 0; } .page-teaching .teaching-collapse { --glass-bg: var(--surface-card-bg); --glass-border: var(--surface-card-border); --glass-shadow: var(--surface-card-shadow); border-radius: 14px; padding: 0 1.2rem; transition: border-color .2s ease, box-shadow .2s ease; } .page-teaching .teaching-collapse[open] { padding-bottom: 1.2rem; } .page-teaching .teaching-collapse[open] .teaching-summary { margin-bottom: 0.5rem; } .page-teaching .teaching-collapse + .teaching-collapse { margin-top: 1.2rem; } .page-teaching .teaching-summary { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.65rem 0; list-style: none; cursor: pointer; position: relative; padding-right: 1.4rem; } .page-teaching .teaching-summary h3 { margin: 0; } .page-teaching .teaching-summary-count { font-size: 0.85rem; color: #637187; font-weight: 400; margin-left: auto; min-width: 7ch; text-align: right; flex: 0 0 auto; padding-top: 0.1rem; } .page-teaching .teaching-summary::-webkit-details-marker, .page-teaching .teaching-summary::marker { display: none; } .page-teaching .teaching-summary::after { content: '\25BC'; font-size: 0.75rem; color: #637187; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-180deg); transition: transform .2s ease; } .page-teaching .teaching-collapse[open] .teaching-summary::after { transform: translateY(-50%) rotate(0deg); } .page-home .content { width: min(92vw, 1000px); } .page-home .home-page { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 4rem; } .page-home #bio { interpolate-size: allow-keywords; } .page-home .bio-panel { display: flow-root; block-size: 0; overflow: clip; opacity: 0; pointer-events: none; transition: block-size 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease; } .page-home .bio-panel.is-active { block-size: auto; opacity: 1; pointer-events: auto; } .page-home .home-hero { --glass-bg: var(--surface-hero-bg); --glass-border: var(--surface-hero-border); --glass-shadow: var(--surface-hero-shadow); display: grid; gap: 1.25rem; border-radius: 16px; padding: 2rem; } .page-home .home-alerts { display: grid; gap: 0.75rem; } .page-home .home-alerts .alert { margin: 0; text-align: left; border-radius: 12px; border: 1px solid var(--surface-card-border); background: var(--surface-card-bg); box-shadow: var(--surface-card-shadow); } .page-home .home-hero-card { --glass-bg: var(--surface-card-bg); --glass-border: var(--surface-card-border); --glass-shadow: var(--surface-card-shadow); padding: 1.6rem; } /* Keep real backdrop glass where it has the most visual value without making every scrolling surface a live compositor layer. Touch and narrow layouts retain the static spectrum/sheen treatment from .liquid-glass. */ @media (hover: hover) and (pointer: fine) and (min-width: 900px) { @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { html[data-style="rich"] .page-home .home-hero { backdrop-filter: blur(4px) saturate(1.06); -webkit-backdrop-filter: blur(4px) saturate(1.06); } html[data-style="rich"] .page-home .home-alerts .alert { backdrop-filter: blur(4px) saturate(1.06); -webkit-backdrop-filter: blur(4px) saturate(1.06); } } } .page-home .home-positions { padding: 0.25rem 0.15rem 0; display: grid; gap: 0.85rem; container: home-positions / inline-size; } .page-home .home-positions h2 { margin: 0; font-size: 1.15rem; } .page-home .home-position-chips { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); overflow: visible; } .page-home .home-position-stack { position: relative; min-height: 110px; overflow: visible; display: grid; gap: 0.55rem; align-content: start; } .page-home .home-position-stack.is-collapsed .home-position-chip { position: absolute; inset: 0; transform: translateY(calc(var(--stack-index) * 6px)) translateX(calc(var(--stack-index) * 1px)) scale(calc(1 - (var(--stack-index) * 0.01))); opacity: 1; pointer-events: none; z-index: calc(10 - var(--stack-index)); box-shadow: 0 8px 16px rgba(12, 32, 67, 0.18); } .page-home .home-position-stack.is-collapsed .home-position-chip:first-of-type { pointer-events: auto; } .page-home .home-position-stack.is-collapsed .home-position-chip:not(:first-of-type) .home-position-content, .page-home .home-position-stack.is-collapsed .home-position-chip:not(:first-of-type) .home-position-order { opacity: 0; } .page-home .home-position-stack.is-multi .home-position-order-suffix { opacity: 0; transform: translateX(-0.04em); width: 0; overflow: hidden; display: inline-block; transition: opacity 0.28s ease, transform 0.28s ease, width 0.28s ease; } .page-home .home-position-stack.is-multi.is-expanded .home-position-order-suffix { opacity: 1; transform: none; width: 0.75em; } .page-home .home-position-stack.is-expanded .home-position-chip { position: relative; transform: none; opacity: 1; margin-top: 0.6rem; z-index: calc(10 - var(--stack-index)); cursor: pointer; } .page-home .home-position-stack.is-expanded { z-index: 6; padding-top: 0.8rem; gap: 0.2rem; } .page-home .home-position-stack.is-expanded .home-position-chip:not(:first-of-type) { margin-top: -0.8rem; transform: translateY(calc(var(--stack-index) * -8px)); } .page-home .home-position-stack.is-expanded .home-position-chip:hover, .page-home .home-position-stack.is-expanded .home-position-chip:focus-within { z-index: 30; transform: translateY(calc(var(--stack-index) * -10px)) translateY(-4px); box-shadow: 0 14px 28px rgba(12, 32, 67, 0.18); } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .page-home .home-position-stack.is-expanded .home-position-chip:hover, :root:not([data-bs-theme="light"]) .page-home .home-position-stack.is-expanded .home-position-chip:focus-within { box-shadow: 0 18px 36px rgba(4, 8, 18, 0.7); } } html[data-bs-theme="dark"] .page-home .home-position-stack.is-expanded .home-position-chip:hover, html[data-bs-theme="dark"] .page-home .home-position-stack.is-expanded .home-position-chip:focus-within { box-shadow: 0 18px 36px rgba(4, 8, 18, 0.7); } .page-home .home-position-stack-toggle { display: none; position: absolute; top: 8px; right: 8px; z-index: 50; height: 22px; min-width: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--accent-20); background: var(--accent-10); color: #2c4f80; font-size: 0.72rem; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation; } .page-home .home-position-stack.is-touch .home-position-stack-toggle { display: inline-flex; align-items: center; justify-content: center; } @media (hover: none), (pointer: coarse) { .page-home .home-position-stack-toggle { display: inline-flex; align-items: center; justify-content: center; } } .page-home .home-position-stack.is-expanded .home-position-stack-toggle { background: var(--accent-15); } .page-home .home-position-chip { display: grid; grid-template-columns: 1fr; align-items: center; gap: 0.7rem; padding: 0.6rem 2.4rem 0.6rem 0.85rem; border-radius: 14px; border: 1px solid var(--accent-22); background: #ffffff; box-shadow: 0 8px 18px rgba(12, 32, 67, 0.12); font-size: 0.92rem; line-height: 1.3; color: #1c2f4a; position: relative; height: 110px; min-height: 110px; overflow: hidden; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, margin-top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .page-home .home-position-chip .home-position-content, .page-home .home-position-chip .home-position-order { transition: opacity 0.35s ease; } .page-home .home-position-order { position: absolute; top: 8px; left: 8px; height: 22px; min-width: 22px; width: max-content; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 0.72rem; font-weight: 700; color: #2c4f80; background: var(--accent-12); border: 1px solid var(--accent-20); } .page-home .home-position-order-num, .page-home .home-position-order-suffix { line-height: 1; } .page-home .home-position-order-suffix { display: inline-block; margin-left: 0.04em; font-size: 0.68rem; } .page-home .home-position-logo-wrap { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--accent-15); } .page-home .home-position-content { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.7rem; min-height: 56px; } .page-home .home-position-logo-wrap--wide { width: 92px; height: 28px; border-radius: 9px; padding: 0 6px; } .page-home .home-position-logo-wrap--wide-xl { width: 70px; height: 22px; border-radius: 9px; padding: 0; } .page-home .home-position-logo-wrap--wide-sm { width: 64px; height: 24px; border-radius: 8px; padding: 0 3px; } .page-home .home-position-logo-wrap--light { background: rgba(255, 255, 255, 0.92); border-color: var(--accent-20); } .page-home .home-position-logo-wrap--dark { background: linear-gradient(135deg, rgba(34, 45, 66, 0.85), rgba(20, 28, 44, 0.9)); border-color: var(--accent-18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .page-home .home-position-logo-wrap--transparent { background: transparent; border-color: rgba(120, 170, 255, 0.12); } .page-home .home-position-logo { height: 20px; width: auto; max-width: 56px; object-fit: contain; flex: 0 0 auto; } .page-home .home-position-logo--wide { height: 20px; max-width: 90px; } .page-home .home-position-logo--wide-sm { height: 14px; max-width: 56px; } .page-home .home-position-logo--wide-xl { height: 15px; max-width: 68px; } .page-home .home-position-logo-wrap--tufts { overflow: hidden; } .page-home .home-position-logo--tufts { height: 20px; max-width: 32px; transform: scale(1.6); } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .page-home .home-position-logo--invert-dark { filter: invert(1) brightness(1.1); } } html[data-bs-theme="dark"] .page-home .home-position-logo--invert-dark { filter: invert(1) brightness(1.1); } .page-home .home-position-logo--tall { height: 24px; max-width: 34px; } .page-home .home-position-meta { display: grid; gap: 0.15rem; padding-right: 0.2rem; min-width: 0; } .page-home .home-position-role { font-weight: 600; color: #0f2d55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .page-home .home-position-org { color: #4b5a6d; font-size: 0.88rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .page-home .home-position-note { color: #5d6c82; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .page-home .home-position-years { font-size: 0.85rem; font-weight: 600; color: #2c4f80; white-space: nowrap; margin-top: 0.05rem; position: absolute; top: 10px; right: 12px; min-width: auto; text-align: right; } @media (max-width: 640px) { .page-home .home-position-chip { grid-template-columns: 1fr auto; } .page-home .home-position-logo-wrap { display: none; } } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .page-home .home-positions { --glass-bg: rgba(18, 26, 44, 0.65); --glass-border: rgba(120, 170, 255, 0.25); --glass-shadow: 0 0.9rem 2rem rgba(4, 8, 18, 0.55); } :root:not([data-bs-theme="light"]) .page-home .home-position-chip { background: rgba(18, 28, 50, 0.98); border-color: rgba(120, 170, 255, 0.28); box-shadow: 0 10px 22px rgba(4, 8, 18, 0.55); color: rgba(214, 228, 255, 0.92); } :root:not([data-bs-theme="light"]) .page-home .home-position-order { color: rgba(160, 200, 255, 0.95); background: var(--accent-18); border-color: rgba(120, 170, 255, 0.35); } :root:not([data-bs-theme="light"]) .page-home .home-position-stack-toggle { background: rgba(10, 18, 32, 0.9); border-color: rgba(120, 170, 255, 0.3); color: rgba(180, 210, 255, 0.95); } :root:not([data-bs-theme="light"]) .page-home .home-position-logo-wrap { background: rgba(10, 18, 32, 0.9); border-color: rgba(120, 170, 255, 0.2); } :root:not([data-bs-theme="light"]) .page-home .home-position-logo-wrap--light { background: linear-gradient(135deg, rgba(232, 240, 255, 0.88), rgba(206, 221, 248, 0.88)); border-color: rgba(120, 170, 255, 0.32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } :root:not([data-bs-theme="light"]) .page-home .home-position-logo-wrap--dark { background: rgba(10, 16, 30, 0.95); border-color: rgba(120, 170, 255, 0.24); } :root:not([data-bs-theme="light"]) .page-home .home-position-logo-wrap--transparent { background: transparent; border-color: rgba(120, 170, 255, 0.2); } :root:not([data-bs-theme="light"]) .page-home .home-position-role { color: rgba(232, 240, 255, 0.96); } :root:not([data-bs-theme="light"]) .page-home .home-position-org { color: rgba(178, 198, 232, 0.85); } :root:not([data-bs-theme="light"]) .page-home .home-position-note { color: rgba(166, 190, 228, 0.8); } :root:not([data-bs-theme="light"]) .page-home .home-position-years { color: rgba(160, 200, 255, 0.9); } } html[data-bs-theme="dark"] .page-home .home-positions { --glass-bg: rgba(18, 26, 44, 0.65); --glass-border: rgba(120, 170, 255, 0.25); --glass-shadow: 0 0.9rem 2rem rgba(4, 8, 18, 0.55); } html[data-bs-theme="dark"] .page-home .home-position-chip { background: rgba(18, 28, 50, 0.98); border-color: rgba(120, 170, 255, 0.28); box-shadow: 0 10px 22px rgba(4, 8, 18, 0.55); color: rgba(214, 228, 255, 0.92); } html[data-bs-theme="dark"] .page-home .home-position-order { color: rgba(160, 200, 255, 0.95); background: var(--accent-18); border-color: rgba(120, 170, 255, 0.35); } html[data-bs-theme="dark"] .page-home .home-position-stack-toggle { background: rgba(10, 18, 32, 0.9); border-color: rgba(120, 170, 255, 0.3); color: rgba(180, 210, 255, 0.95); } html[data-bs-theme="dark"] .page-home .home-position-logo-wrap { background: rgba(10, 18, 32, 0.9); border-color: rgba(120, 170, 255, 0.2); } html[data-bs-theme="dark"] .page-home .home-position-logo-wrap--light { background: linear-gradient(135deg, rgba(232, 240, 255, 0.88), rgba(206, 221, 248, 0.88)); border-color: rgba(120, 170, 255, 0.32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } html[data-bs-theme="dark"] .page-home .home-position-logo-wrap--dark { background: rgba(10, 16, 30, 0.95); border-color: rgba(120, 170, 255, 0.24); } html[data-bs-theme="dark"] .page-home .home-position-logo-wrap--transparent { background: transparent; border-color: rgba(120, 170, 255, 0.2); } html[data-bs-theme="dark"] .page-home .home-position-role { color: rgba(232, 240, 255, 0.96); } html[data-bs-theme="dark"] .page-home .home-position-org { color: rgba(178, 198, 232, 0.85); } html[data-bs-theme="dark"] .page-home .home-position-note { color: rgba(166, 190, 228, 0.8); } html[data-bs-theme="dark"] .page-home .home-position-years { color: rgba(160, 200, 255, 0.9); } html[data-bs-theme="dark"] .page-home .home-alerts .alert { box-shadow: 0 0.7rem 1.9rem rgba(5, 12, 28, 0.6); } .page-home .home-local-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; } .page-home .home-nav-link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1.05rem; border-radius: 999px; border: 1px solid var(--accent-25); background: var(--accent-10); font-weight: 500; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .page-home .home-nav-link:hover, .page-home .home-nav-link:focus { background: var(--accent-20); border-color: var(--accent-45); transform: translateY(-1px); } .page-home .home-section { --glass-bg: var(--surface-section-bg); --glass-border: var(--surface-section-border); --glass-shadow: var(--surface-section-shadow); padding: 2rem; display: grid; gap: 1.2rem; container: home-section / inline-size; } .page-home .home-section__header { display: grid; gap: 0.3rem; } .page-home .home-section__lede { margin: 0; color: #5b677a; font-size: clamp(0.95rem, 2.2cqi, 1.05rem); } .page-home .home-interest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem 0.75rem; padding: 0; margin: 0; list-style: none; } .page-home .home-interest { padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--accent-18); color: #173a62; font-weight: 500; font-size: 0.93rem; } .page-home .home-publications { display: grid; gap: 1rem; } .page-home .home-teaching-grid { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-items: stretch; } .page-home .home-teaching-card { --glass-bg: var(--surface-card-bg); --glass-border: var(--surface-card-border); --glass-shadow: var(--surface-card-shadow); display: grid; gap: 0.4rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--surface-card-border); background: var(--surface-card-bg); box-shadow: var(--surface-card-shadow); grid-template-rows: auto auto auto 1fr; } .page-home .home-teaching-code { display: inline-flex; align-items: center; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--accent-12); color: #0b3a73; font-weight: 600; } .page-home .home-teaching-title { margin: 0; font-size: 1.1rem; line-height: 1.35; } .page-home .home-teaching-title a { text-decoration: none; } .page-home .home-teaching-title a:hover, .page-home .home-teaching-title a:focus { text-decoration: underline; } .page-home .home-teaching-meta { margin: 0; color: #4b5a6d; font-size: 0.95rem; } .page-home .home-teaching-terms { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-self: start; } .page-home .home-teaching-term { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--accent-14); color: #183a60; font-size: 0.83rem; font-weight: 500; } .page-home .home-card-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; } .page-home .home-card-column { display: grid; gap: 1.25rem; align-content: start; } .page-home .home-card { --glass-bg: var(--surface-card-bg); --glass-border: var(--surface-card-border); --glass-shadow: var(--surface-card-shadow); display: grid; gap: 0.9rem; padding: 1rem 1.2rem; border-radius: 14px; align-content: start; } .page-home .home-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; } .page-home .home-people__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.18rem 0.8rem; align-items: baseline; font-size: 0.95rem; } .page-home #undergraduates .home-people__item { grid-template-columns: minmax(0, 1fr) auto; } .page-home .home-people__primary a { text-decoration: none; font-weight: 600; } .page-home .home-people__primary a:hover, .page-home .home-people__primary a:focus { text-decoration: underline; } .page-home .home-people__note { display: none; } .page-home .home-people__note--mobile { display: none; } .page-home .anchored-note { position: fixed; inset: auto; position-area: block-start; position-try-fallbacks: flip-block, flip-inline; position-visibility: anchors-visible; width: max-content; max-width: min(24rem, calc(100vw - 2rem)); margin: 0 0 0.55rem; padding: 0.65rem 0.8rem; border: 1px solid var(--surface-card-border); border-radius: 10px; background: color-mix(in oklab, var(--color-canvas) 92%, white 8%); box-shadow: 0 0.8rem 2rem color-mix(in oklab, var(--color-heading) 16%, transparent); color: var(--color-text); font-size: 0.88rem; line-height: 1.35; text-align: left; opacity: 0; transform: translateY(0.35rem) scale(0.975); transform-origin: bottom center; transition: opacity 160ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1), display 200ms, overlay 200ms; transition-behavior: allow-discrete; } .page-home .anchored-note:popover-open { opacity: 1; transform: none; } @starting-style { .page-home .anchored-note:popover-open { opacity: 0; transform: translateY(0.35rem) scale(0.975); } } .page-home .anchored-note::backdrop { background: transparent; } html[data-bs-theme="dark"] .page-home .anchored-note { background: color-mix(in oklab, var(--color-canvas) 88%, white 12%); box-shadow: 0 1rem 2.5rem rgba(2, 7, 18, 0.55); } @media (prefers-reduced-motion: reduce) { .page-home .anchored-note, .page-home .anchored-note:popover-open { opacity: 1; transform: none; transition: none; } } .page-home .home-people__meta { display: contents; color: #4b5a6d; font-size: 0.9rem; } .page-home .home-people__years { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; } .page-home .home-people__current { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 0.45rem; align-items: baseline; min-width: 0; color: #4b5a6d; font-size: 0.86rem; font-weight: 400; } .page-home .home-people__current-label { flex: 0 0 auto; color: var(--accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .page-home .home-people__current-destination { min-width: 0; } .page-home .home-people--single .home-people__item { grid-template-columns: 1fr; } .page-home .home-facts { display: grid; gap: 0.5rem; } .page-home .erdos-diagram { /* Light palette (default); dark overrides swap these below. */ --erdos-ink: rgba(38, 74, 118, 0.78); --erdos-name: #1c3a5e; --erdos-node: rgba(38, 74, 118, 0.12); --erdos-node-stroke: rgba(38, 74, 118, 0.5); --erdos-accent: #2f5fa8; --erdos-accent-soft: rgba(47, 95, 168, 0.16); --erdos-pill-bg: rgba(38, 74, 118, 0.09); --erdos-pill-border: rgba(38, 74, 118, 0.26); --erdos-pill-text: rgba(38, 74, 118, 0.95); --erdos-pill-hover-bg: rgba(47, 95, 168, 0.16); --erdos-caption: rgba(38, 74, 118, 0.72); margin: 0.9rem auto 0.2rem; max-width: 560px; } .page-home .erdos-diagram svg { width: 100%; height: auto; overflow: visible; } .page-home .erdos-diagram .erdos-edge { stroke: var(--erdos-ink); stroke-width: 1.8; stroke-linecap: round; } .page-home .erdos-diagram .erdos-node { fill: var(--erdos-node); stroke: var(--erdos-node-stroke); stroke-width: 1.5; } .page-home .erdos-diagram .erdos-node--hub, .page-home .erdos-diagram .erdos-node--end { fill: var(--erdos-accent); stroke: var(--erdos-accent); } .page-home .erdos-diagram .erdos-halo { fill: var(--erdos-accent-soft); stroke: none; } .page-home .erdos-diagram .erdos-name { font-family: "Chaparral Pro", "Chaparral Pro Fallback", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 13px; font-weight: 600; fill: var(--erdos-name); } .page-home .erdos-diagram .erdos-name--hub { fill: var(--erdos-accent); font-weight: 700; } .page-home .erdos-diagram .erdos-pill { fill: var(--erdos-pill-bg); stroke: var(--erdos-pill-border); stroke-width: 1; transition: fill 0.15s ease, stroke 0.15s ease; } .page-home .erdos-diagram .erdos-link-text { font-family: "Chaparral Pro Caption", "Chaparral Pro Fallback", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 12px; font-weight: 400; letter-spacing: 0.01em; fill: var(--erdos-pill-text); } .page-home .erdos-diagram .erdos-link { cursor: pointer; } .page-home .erdos-diagram .erdos-link:hover .erdos-pill, .page-home .erdos-diagram .erdos-link:focus-visible .erdos-pill { fill: var(--erdos-pill-hover-bg); stroke: var(--erdos-accent); } .page-home .erdos-diagram .erdos-link:hover .erdos-link-text, .page-home .erdos-diagram .erdos-link:focus-visible .erdos-link-text { fill: var(--erdos-accent); text-decoration: underline; } .page-home .erdos-diagram .erdos-caption { margin-top: 0.6rem; text-align: center; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--erdos-caption); } html[data-bs-theme="light"] .page-home .home-positions h2, html[data-bs-theme="light"] .page-home .home-section h2, html[data-bs-theme="light"] .page-home .home-card h3, html[data-bs-theme="light"] .page-home .home-teaching-title, html[data-bs-theme="light"] .page-home .home-teaching-title a, html[data-bs-theme="light"] .page-home .home-people__primary, html[data-bs-theme="light"] .page-home .home-people__primary a { color: #163150; } html[data-bs-theme="light"] .page-home .home-positions { --glass-bg: linear-gradient(135deg, rgba(255,255,255,.97), rgba(243,247,255,.94)); --glass-border: var(--accent-16); --glass-shadow: 0 0.8rem 1.9rem rgba(12,32,67,.1); color: #1c324f; } html[data-bs-theme="light"] .page-home .home-section__lede, html[data-bs-theme="light"] .page-home .home-teaching-meta, html[data-bs-theme="light"] .page-home .home-people__meta, html[data-bs-theme="light"] .page-home .home-people__note { color: #4e6078; } html[data-bs-theme="light"] .page-home .home-people__current { color: #223b5d; } html[data-bs-theme="light"] .page-home .home-position-chip { background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 245, 255, 0.92)); border-color: var(--accent-20); box-shadow: 0 8px 18px rgba(12, 32, 67, 0.12); color: #1b304c; } html[data-bs-theme="light"] .page-home .home-position-stack-toggle { background: var(--accent-12); border-color: var(--accent-22); color: #26476f; } html[data-bs-theme="light"] .page-home .home-position-order { color: #23456f; background: var(--accent-12); border-color: var(--accent-20); } html[data-bs-theme="light"] .page-home .home-position-logo-wrap { background: rgba(255, 255, 255, 0.94); border-color: var(--accent-16); } html[data-bs-theme="light"] .page-home .home-position-logo-wrap--dark { background: linear-gradient(135deg, rgba(49, 63, 91, 0.96), rgba(27, 38, 61, 0.98)); border-color: var(--accent-22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } html[data-bs-theme="light"] .page-home .home-position-role { color: #102b4c; } html[data-bs-theme="light"] .page-home .home-position-org { color: #485b72; } html[data-bs-theme="light"] .page-home .home-position-note { color: #5c6f85; } html[data-bs-theme="light"] .page-home .home-position-years { color: #284a73; } html[data-bs-theme="light"] .page-home .home-interest { background: var(--accent-14); color: #16365c; } html[data-bs-theme="light"] .page-home .home-teaching-code, html[data-bs-theme="light"] .page-home .home-teaching-term { background: var(--accent-14); color: #17365d; } /* Explicit light palette (mirrors the default on .erdos-diagram above) so an explicit light theme choice always wins over the dark overrides below. */ html[data-bs-theme="light"] .page-home .erdos-diagram, html[data-bs-theme="light"] .page-home .erdos-diagram svg { --erdos-ink: rgba(38, 74, 118, 0.78); --erdos-name: #1c3a5e; --erdos-node: rgba(38, 74, 118, 0.12); --erdos-node-stroke: rgba(38, 74, 118, 0.5); --erdos-accent: #2f5fa8; --erdos-accent-soft: rgba(47, 95, 168, 0.16); --erdos-pill-bg: rgba(38, 74, 118, 0.09); --erdos-pill-border: rgba(38, 74, 118, 0.26); --erdos-pill-text: rgba(38, 74, 118, 0.95); --erdos-pill-hover-bg: rgba(47, 95, 168, 0.16); --erdos-caption: rgba(38, 74, 118, 0.72); } html[data-bs-theme="dark"] .page-home .home-nav-link { color: rgba(226, 236, 255, 0.92); background: var(--accent-14); border-color: rgba(120, 170, 255, 0.28); } html[data-bs-theme="dark"] .page-home .home-nav-link:hover, html[data-bs-theme="dark"] .page-home .home-nav-link:focus { color: rgba(238, 244, 255, 0.98); background: var(--accent-22); border-color: rgba(140, 185, 255, 0.42); } html[data-bs-theme="dark"] .page-home .home-positions h2, html[data-bs-theme="dark"] .page-home .home-section h2, html[data-bs-theme="dark"] .page-home .home-card h3, html[data-bs-theme="dark"] .page-home .home-teaching-title, html[data-bs-theme="dark"] .page-home .home-teaching-title a, html[data-bs-theme="dark"] .page-home .home-people__primary, html[data-bs-theme="dark"] .page-home .home-people__primary a { color: rgba(240, 246, 255, 0.96); } html[data-bs-theme="dark"] .page-home .home-section__lede, html[data-bs-theme="dark"] .page-home .home-teaching-meta, html[data-bs-theme="dark"] .page-home .home-people__meta, html[data-bs-theme="dark"] .page-home .home-people__note, html[data-bs-theme="dark"] .page-home .home-people__note--mobile { color: rgba(214, 229, 255, 0.78); } html[data-bs-theme="dark"] .page-home .home-people__current { color: rgba(220, 232, 255, 0.94); } html[data-bs-theme="dark"] .page-home .home-interest { background: var(--accent-16); color: rgba(228, 237, 255, 0.94); } html[data-bs-theme="dark"] .page-home .home-teaching-code, html[data-bs-theme="dark"] .page-home .home-teaching-term { background: var(--accent-18); color: rgba(224, 235, 255, 0.94); } /* Dark palette: swap the CSS variables the diagram reads from. */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .page-home .erdos-diagram { --erdos-ink: rgba(214, 228, 255, 0.82); --erdos-name: rgba(228, 238, 255, 0.95); --erdos-node: rgba(130, 165, 220, 0.2); --erdos-node-stroke: rgba(170, 200, 245, 0.6); --erdos-accent: #86b0ff; --erdos-accent-soft: rgba(134, 176, 255, 0.2); --erdos-pill-bg: rgba(134, 176, 255, 0.14); --erdos-pill-border: rgba(170, 200, 245, 0.4); --erdos-pill-text: rgba(214, 228, 255, 0.9); --erdos-pill-hover-bg: rgba(134, 176, 255, 0.26); --erdos-caption: rgba(190, 208, 238, 0.75); } } html[data-bs-theme="dark"] .page-home .erdos-diagram { --erdos-ink: rgba(214, 228, 255, 0.82); --erdos-name: rgba(228, 238, 255, 0.95); --erdos-node: rgba(130, 165, 220, 0.2); --erdos-node-stroke: rgba(170, 200, 245, 0.6); --erdos-accent: #86b0ff; --erdos-accent-soft: rgba(134, 176, 255, 0.2); --erdos-pill-bg: rgba(134, 176, 255, 0.14); --erdos-pill-border: rgba(170, 200, 245, 0.4); --erdos-pill-text: rgba(214, 228, 255, 0.9); --erdos-pill-hover-bg: rgba(134, 176, 255, 0.26); --erdos-caption: rgba(190, 208, 238, 0.75); } @media (max-width: 560px) { .page-home .erdos-diagram .erdos-name { font-size: 15px; } .page-home .erdos-diagram .erdos-link-text { font-size: 13px; } } @media (max-width: 640px) { .page-home .home-hero { padding: 1.25rem; } .page-home .home-hero-card { padding: 1rem; } .page-home .home-nav-link { width: 100%; justify-content: center; } .page-home .home-section { padding: 1.4rem; } .page-home .home-section__header { gap: 0.25rem; } .page-home .home-section__lede { font-size: 0.95rem; } .page-home .home-section h2 { font-size: 1.3rem; } .page-home .home-people__note--mobile { display: inline; color: #637187; font-size: 0.85rem; } .page-home .home-people__item { grid-template-columns: 1fr; gap: 0.2rem; } .page-home .home-people__years { grid-column: 1; grid-row: 2; text-align: left; } .page-home .home-people__current { grid-column: 1; grid-row: 3; margin-top: 0.05rem; } .page-home .home-teaching-grid, .page-home .home-card-grid { align-items: start; } .page-home .home-teaching-grid { grid-template-columns: minmax(0, 1fr); } .page-home .home-card-grid { grid-template-columns: minmax(0, 1fr); } .page-home .home-teaching-card { grid-template-rows: auto auto auto auto; } .page-teaching .teaching-card { grid-template-rows: auto auto auto auto auto; } } /* Rich mode uses one glass boundary per major section. Content within those boundaries is intentionally editorial: rows, columns, and hairline dividers replace nested cards and ornamental pills. */ html[data-style="rich"] .page-home .home-hero-card { padding: 0.25rem 0.25rem 0.9rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; } html[data-style="rich"] .page-home .home-positions { padding: 0.9rem 0.25rem 0; border-top: 1px solid var(--surface-card-border); } html[data-style="rich"] .page-home .home-hero { gap: 1rem; } html[data-style="rich"] .page-home .home-position-chips { gap: 0.4rem 1.5rem; } html[data-style="rich"] .page-home .home-position-stack { min-height: 0; gap: 0; padding: 0; } html[data-style="rich"] .page-home .home-position-stack.is-collapsed .home-position-chip { position: relative; inset: auto; transform: none; opacity: 1; pointer-events: auto; z-index: auto; box-shadow: none; } html[data-style="rich"] .page-home .home-position-stack.is-collapsed .home-position-chip:not(:first-of-type) { display: none; } html[data-style="rich"] .page-home .home-position-stack.is-collapsed .home-position-chip:not(:first-of-type) .home-position-content, html[data-style="rich"] .page-home .home-position-stack.is-collapsed .home-position-chip:not(:first-of-type) .home-position-order { opacity: 1; } html[data-style="rich"] .page-home .home-position-stack.is-expanded { padding-top: 0; gap: 0; } html[data-style="rich"] .page-home .home-position-stack.is-expanded .home-position-chip, html[data-style="rich"] .page-home .home-position-stack.is-expanded .home-position-chip:not(:first-of-type), html[data-style="rich"] .page-home .home-position-stack.is-expanded .home-position-chip:hover, html[data-style="rich"] .page-home .home-position-stack.is-expanded .home-position-chip:focus-within { position: relative; margin-top: 0; transform: none; box-shadow: none; cursor: default; } html[data-style="rich"] .page-home .home-position-chip, html[data-bs-theme="light"][data-style="rich"] .page-home .home-position-chip, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-position-chip { height: auto; min-height: 86px; padding: 0.85rem 0 0.85rem 1.8rem; border: 0; border-bottom: 1px solid var(--surface-card-border); border-radius: 0; background: transparent; box-shadow: none; overflow: visible; transition: none; } html[data-style="rich"] .page-home .home-position-content { align-items: start; } html[data-style="rich"] .page-home .home-position-logo-wrap { margin-top: 0.15rem; } html[data-style="rich"] .page-home .home-position-role { padding-right: 4rem; } html[data-style="rich"] .page-home .home-position-org, html[data-style="rich"] .page-home .home-position-note { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; text-wrap: pretty; } @container home-positions (min-width: 34rem) { .page-home .home-position-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-style="rich"] .page-home .home-position-chip, html[data-bs-theme="light"][data-style="rich"] .page-home .home-position-chip, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-position-chip { border-top: 1px solid var(--surface-card-border); border-bottom: 0; } html[data-style="rich"] .page-home .home-position-stack:nth-child(-n + 2) > .home-position-chip:first-of-type { border-top-color: transparent; } } @container home-positions (min-width: 52rem) { .page-home .home-position-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-style="rich"] .page-home .home-position-stack:nth-child(3) > .home-position-chip:first-of-type { border-top-color: transparent; } } @container home-section (min-width: 36rem) { .page-home .home-teaching-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container home-section (min-width: 52rem) { .page-home .home-teaching-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container home-section (min-width: 46rem) { .page-home .home-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html[data-style="rich"] .page-home .home-position-stack:last-child .home-position-chip:last-of-type { border-bottom-color: transparent; } @supports (interpolate-size: allow-keywords) { html[data-style="rich"] .page-home .home-position-stack { interpolate-size: allow-keywords; } html[data-style="rich"] .page-home .home-position-stack.is-collapsed .home-position-chip:not(:first-of-type) { display: grid; block-size: 0; min-height: 0; padding-block: 0; border-block-width: 0; opacity: 0; overflow: clip; visibility: hidden; } html[data-style="rich"] .page-home .home-position-stack.is-expanded .home-position-chip { block-size: auto; } html[data-style="rich"] .page-home .home-position-stack .home-position-chip { transition: block-size 420ms cubic-bezier(0.22, 1, 0.36, 1), min-height 420ms cubic-bezier(0.22, 1, 0.36, 1), padding-block 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease; } } html[data-style="rich"] .page-home .home-position-order, html[data-bs-theme="light"][data-style="rich"] .page-home .home-position-order, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-position-order { top: 1rem; left: 0; min-width: 1.2rem; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: currentColor; opacity: 0.58; justify-content: flex-start; } html[data-style="rich"] .page-home .home-position-stack-toggle, html[data-bs-theme="light"][data-style="rich"] .page-home .home-position-stack-toggle, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-position-stack-toggle { display: inline-flex; position: static; order: 1; justify-self: end; margin: 0.2rem 0 0.65rem; top: auto; bottom: auto; right: 0; min-width: 0; height: auto; padding: 0.15rem 0; border: 0; border-radius: 0; border-bottom: 1px solid currentColor; background: transparent; color: currentColor; font-weight: 600; opacity: 0.78; } html[data-style="rich"] .page-home .home-position-stack.is-expanded .home-position-stack-toggle { background: transparent; } html[data-style="rich"] .page-home .home-position-logo-wrap, html[data-bs-theme="light"][data-style="rich"] .page-home .home-position-logo-wrap, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-position-logo-wrap { border: 0; border-radius: 3px; box-shadow: none; } html[data-style="rich"] .page-home .home-position-years { top: 1rem; right: 0; } html[data-style="rich"] .page-home .home-local-nav { gap: 0.5rem 1.4rem; padding-inline: 0.25rem; } html[data-style="rich"] .page-home .home-nav-link, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-nav-link { padding: 0.2rem 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; transform: none; } html[data-style="rich"] .page-home .home-nav-link:hover, html[data-style="rich"] .page-home .home-nav-link:focus, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-nav-link:hover, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-nav-link:focus { border-color: currentColor; background: transparent; transform: none; } html[data-style="rich"] .page-home .home-teaching-grid { gap: 1.4rem 2rem; } html[data-style="rich"] .page-home .home-teaching-card { padding: 0.9rem 0 0; border: 0; border-top: 1px solid var(--surface-card-border); border-radius: 0; background: transparent; box-shadow: none; } html[data-style="rich"] .page-home .home-teaching-code, html[data-style="rich"] .page-home .home-teaching-term, html[data-bs-theme="light"][data-style="rich"] .page-home .home-teaching-code, html[data-bs-theme="light"][data-style="rich"] .page-home .home-teaching-term, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-teaching-code, html[data-bs-theme="dark"][data-style="rich"] .page-home .home-teaching-term { padding: 0; border-radius: 0; background: transparent; } html[data-style="rich"] .page-home .home-teaching-term:not(:last-child)::after { content: "·"; margin-left: 0.5rem; opacity: 0.55; } html[data-style="rich"] .page-home .home-card-grid, html[data-style="rich"] .page-home .home-card-column { gap: 1.5rem 2rem; } html[data-style="rich"] .page-home .home-card { padding: 1rem 0 0; border: 0; border-top: 1px solid var(--surface-card-border); border-radius: 0; background: transparent; box-shadow: none; } @media (max-width: 640px) { html[data-style="rich"] .page-home .home-hero-card { padding: 0 0 1.1rem; } html[data-style="rich"] .page-home .home-position-chip { padding-right: 0; } html[data-style="rich"] .page-home .home-nav-link { width: auto; justify-content: flex-start; } } .page-joining .joining-page { display: flex; flex-direction: column; gap: 1.5rem; } .page-joining .joining-hero, .page-joining .joining-section { display: grid; gap: 1.1rem; } .page-joining .joining-nav { --glass-bg: var(--surface-card-bg); --glass-border: var(--surface-card-border); --glass-shadow: var(--surface-card-shadow); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; padding: 0.85rem 1.1rem; border-radius: 14px; border: 1px solid var(--surface-card-border); box-shadow: var(--surface-card-shadow); text-align: center; } .page-joining .joining-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.38rem 0.8rem; border-radius: 999px; border: 1px solid rgba(40, 109, 192, 0.2); background: rgba(40, 109, 192, 0.1); font-weight: 500; text-decoration: none; color: inherit; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .page-joining .joining-nav a:hover, .page-joining .joining-nav a:focus { background: rgba(40, 109, 192, 0.18); border-color: rgba(40, 109, 192, 0.35); transform: translateY(-1px); } .page-joining .joining-hero { --glass-bg: var(--surface-hero-bg); --glass-border: var(--surface-hero-border); --glass-shadow: var(--surface-hero-shadow); padding: 2rem; } .page-joining .joining-section { --glass-bg: var(--surface-section-bg); --glass-border: var(--surface-section-border); --glass-shadow: var(--surface-section-shadow); padding: 1.6rem 1.8rem; } .page-joining .joining-section h3 { margin: 0; font-size: 1.35rem; } .page-joining .joining-section h4, .page-joining .joining-section h5 { margin-top: 1rem; } .page-joining .joining-section ul { margin-left: 1.1rem; } .page-joining .joining-section p:last-child { margin-bottom: 0; } .page-safe-and-sound .safe-and-sound-page { display: flex; flex-direction: column; gap: 1.5rem; } .page-safe-and-sound .safe-and-sound-hero, .page-safe-and-sound .safe-and-sound-main { display: grid; gap: 1.1rem; width: 100%; max-width: 100%; margin-inline: 0; } .page-safe-and-sound .safe-and-sound-hero { --glass-bg: var(--surface-hero-bg); --glass-border: var(--surface-hero-border); --glass-shadow: var(--surface-hero-shadow); padding: 2.1rem 2.2rem; font-size: 1.22rem; line-height: 1.75; color: var(--bs-body-color); } .page-safe-and-sound .safe-and-sound-main { --glass-bg: var(--surface-section-bg); --glass-border: var(--surface-section-border); --glass-shadow: var(--surface-section-shadow); padding: 1.9rem 2.2rem; font-size: 1.22rem; line-height: 1.75; color: var(--bs-body-color); } .page-safe-and-sound .safe-and-sound-hero h2 { margin: 0; font-size: clamp(1.95rem, 4vw, 2.4rem); line-height: 1.15; text-wrap: balance; } .page-safe-and-sound .safe-and-sound-hero p { margin: 0.4rem 0 0; max-width: none; text-align: left; hyphens: auto; } .page-safe-and-sound .safe-and-sound-hero > p:not(.safe-and-sound-decra-note) { text-indent: 1.1em; } .page-safe-and-sound .safe-and-sound-decra-note { margin: 0.6rem 0 0; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid rgba(102, 150, 255, 0.2); background: rgba(40, 109, 192, 0.08); } .page-safe-and-sound .safe-and-sound-hero__figure { margin: 0.9rem 0 0; position: relative; } .page-safe-and-sound .safe-and-sound-hero__image { width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(102, 150, 255, 0.22); box-shadow: 0 0.9rem 2rem rgba(3, 8, 20, 0.35); } /* Reduce visible banding in large smooth regions (e.g., sky) with subtle grain overlay. */ .page-safe-and-sound .safe-and-sound-hero__figure::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); background-size: 260px 260px; opacity: 0.06; mix-blend-mode: overlay; } .page-safe-and-sound .safe-and-sound-main strong { color: var(--bs-emphasis-color); } .page-safe-and-sound .safe-and-sound-main h3 { margin: 1.9rem 0 0.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(102, 150, 255, 0.22); font-size: 1.45rem; } .page-safe-and-sound .safe-and-sound-main h3:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .page-safe-and-sound .safe-and-sound-main p { margin: 0.85rem 0; text-align: left; hyphens: auto; } .page-safe-and-sound .safe-and-sound-main > p { text-indent: 1.1em; } .page-safe-and-sound .safe-and-sound-collapse__body p { text-indent: 1.1em; } .page-safe-and-sound .safe-and-sound-main li { text-align: left; hyphens: auto; } .page-safe-and-sound .safe-and-sound-kv, .page-safe-and-sound .safe-and-sound-callout { border-radius: 14px; border: 1px solid rgba(102, 150, 255, 0.22); background: rgba(40, 109, 192, 0.08); padding: 1rem 1.1rem; margin: 1rem 0 0.5rem; } .page-safe-and-sound .safe-and-sound-kv > p, .page-safe-and-sound .safe-and-sound-callout > p { margin: 0; } .page-safe-and-sound .safe-and-sound-kv ul, .page-safe-and-sound .safe-and-sound-callout ul { margin: 0.6rem 0 0; padding-left: 1.05rem; } .page-safe-and-sound .safe-and-sound-main ul { margin: 0.65rem 0 1.1rem; padding-left: 1.05rem; } .page-safe-and-sound .safe-and-sound-main li { margin-bottom: 0.55em; } .page-safe-and-sound .safe-and-sound-apply-steps { margin: 0.75rem 0 1.1rem; padding-left: 1.75rem; list-style: decimal; list-style-position: outside; } .page-safe-and-sound .safe-and-sound-apply-steps > li { margin-bottom: 0.9rem; } .page-safe-and-sound .safe-and-sound-apply-attachments { margin: 0.7rem 0 0.5rem; padding-left: 2.05rem; margin-left: 1.55rem; list-style-position: outside; } .page-safe-and-sound .safe-and-sound-apply-steps > li::marker, .page-safe-and-sound .safe-and-sound-apply-attachments > li::marker { color: var(--bs-secondary-color); font-weight: 600; } .page-safe-and-sound .safe-and-sound-apply-attachments > li { margin-bottom: 0.7rem; } .page-safe-and-sound .safe-and-sound-collapse { margin-top: 1rem; border-radius: 14px; border: 1px solid rgba(102, 150, 255, 0.22); background: rgba(40, 109, 192, 0.08); padding: 0.9rem 1rem; } .page-safe-and-sound .safe-and-sound-collapse > summary { cursor: pointer; font-weight: 600; list-style: none; } .page-safe-and-sound .safe-and-sound-collapse > summary::-webkit-details-marker { display: none; } .page-safe-and-sound .safe-and-sound-collapse > summary::before { content: "▸"; display: inline-block; margin-right: 0.5rem; transform: translateY(-0.02em); } .page-safe-and-sound .safe-and-sound-collapse[open] > summary::before { content: "▾"; } .page-safe-and-sound .safe-and-sound-collapse__body { margin-top: 0.8rem; } .page-safe-and-sound .safe-and-sound-main p:last-child { margin-bottom: 0; } .page-publications .publications-page { display: grid; gap: 2rem; width: 100%; max-width: 100%; margin-inline: 0; } .page-publications .publications-page > h2 { margin: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; font-size: clamp(1.85rem, 4vw, 2.3rem); } .page-publications .publications-lede { display: grid; gap: 0.85rem; padding: 1.25rem 1.6rem; border-left: 4px solid rgba(40, 109, 192, 0.45); background: rgba(255, 255, 255, 0.62); border-radius: 14px; box-shadow: 0 1.2rem 2.6rem rgba(12, 32, 67, 0.12); } .page-publications .publications-lede p { margin: 0; max-width: 68ch; } html[data-bs-theme="light"] .page-publications .publications-lede { background: rgba(255, 255, 255, 0.82); border-left-color: rgba(40, 109, 192, 0.42); box-shadow: 0 1.2rem 2.6rem rgba(12, 32, 67, 0.12); color: #18314f; } html[data-bs-theme="light"] .page-publications .publications-lede p { color: #40536a; } .page-publications .publications-themes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .page-publications .publications-theme { display: inline-flex; align-items: center; justify-content: center; padding: 0.42rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; border: 2px solid transparent; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease, transform 120ms ease; line-height: 1.1; appearance: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0.45rem 1.25rem rgba(15, 32, 68, 0.08); } .page-publications .publications-theme:hover:not(.is-active) { transform: translateY(-1px); } .page-publications .publications-theme:focus-visible { outline: 2px solid rgba(40, 109, 192, 0.7); outline-offset: 2px; } .page-publications .publications-theme.is-active { color: #fff; font-weight: 700; } .page-publications .publications-theme[data-theme-id="security"] { border-color: rgba(40, 109, 192, 0.8); color: #0f2f58; background: rgba(40, 109, 192, 0.18); } .page-publications .publications-theme.is-active[data-theme-id="security"] { background: #286dc0; border-color: #1f4e8f; box-shadow: 0 0.45rem 1.2rem rgba(40, 109, 192, 0.36); } .page-publications .publications-theme[data-theme-id="law"] { border-color: rgba(47, 157, 93, 0.8); color: #12482a; background: rgba(47, 157, 93, 0.18); } .page-publications .publications-theme.is-active[data-theme-id="law"] { background: #2f9d5d; border-color: #1f6f41; box-shadow: 0 0.45rem 1.2rem rgba(47, 157, 93, 0.32); } .page-publications .publications-theme[data-theme-id="crypto"] { border-color: rgba(122, 61, 216, 0.8); color: #32186b; background: rgba(122, 61, 216, 0.18); } .page-publications .publications-theme.is-active[data-theme-id="crypto"] { background: #7a3dd8; border-color: #5428a0; box-shadow: 0 0.45rem 1.2rem rgba(122, 61, 216, 0.32); } .publication-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.65rem 0 0.85rem; } .publication-actions__buttons { display: flex; flex-wrap: wrap; gap: 0.35rem; } .publication-actions__buttons > * { margin: 0; } .publication-theme-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-left: 0.45rem; } .publication-theme-tag { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.24rem 0.72rem 0.24rem 0.62rem; border-radius: 12px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(40, 109, 192, 0.12); color: #173b6d; border: 1px solid rgba(40, 109, 192, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65); position: relative; } .publication-theme-tag::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #286dc0; box-shadow: 0 0 0 2px rgba(40, 109, 192, 0.18); } .publication-theme-tag--law { background: rgba(47, 157, 93, 0.12); border-color: rgba(47, 157, 93, 0.3); color: #195835; } .publication-theme-tag--law::before { background: #2f9d5d; box-shadow: 0 0 0 2px rgba(47, 157, 93, 0.18); } .publication-theme-tag--crypto { background: rgba(122, 61, 216, 0.12); border-color: rgba(122, 61, 216, 0.3); color: #3f227f; } .publication-theme-tag--crypto::before { background: #7a3dd8; box-shadow: 0 0 0 2px rgba(122, 61, 216, 0.18); } .publication-theme-tag--security { background: rgba(40, 109, 192, 0.12); border-color: rgba(40, 109, 192, 0.3); color: #173b6d; } .publication-theme-tag--security::before { background: #286dc0; box-shadow: 0 0 0 2px rgba(40, 109, 192, 0.18); } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .page-publications .publications-theme { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0.4rem 1.1rem rgba(0, 0, 0, 0.35); color: rgba(226, 236, 255, 0.86); } :root:not([data-bs-theme="light"]) .page-publications .publications-theme[data-theme-id="security"] { border-color: rgba(118, 182, 255, 0.55); color: rgba(210, 227, 255, 0.9); background: rgba(45, 114, 210, 0.28); } :root:not([data-bs-theme="light"]) .page-publications .publications-theme.is-active[data-theme-id="security"] { background: #3d7bff; border-color: rgba(179, 210, 255, 0.85); box-shadow: 0 0.45rem 1.3rem rgba(61, 123, 255, 0.38); } :root:not([data-bs-theme="light"]) .page-publications .publications-theme[data-theme-id="law"] { border-color: rgba(137, 230, 180, 0.6); color: rgba(209, 245, 227, 0.92); background: rgba(47, 157, 93, 0.32); } :root:not([data-bs-theme="light"]) .page-publications .publications-theme.is-active[data-theme-id="law"] { background: #35b679; border-color: rgba(171, 245, 205, 0.85); box-shadow: 0 0.45rem 1.3rem rgba(53, 182, 121, 0.34); } :root:not([data-bs-theme="light"]) .page-publications .publications-theme[data-theme-id="crypto"] { border-color: rgba(198, 154, 255, 0.6); color: rgba(238, 221, 255, 0.9); background: rgba(122, 61, 216, 0.34); } :root:not([data-bs-theme="light"]) .page-publications .publications-theme.is-active[data-theme-id="crypto"] { background: #8f55f1; border-color: rgba(214, 189, 255, 0.85); box-shadow: 0 0.45rem 1.3rem rgba(143, 85, 241, 0.38); } :root:not([data-bs-theme="light"]) .publication-theme-tag { border-color: rgba(110, 168, 255, 0.35); background: rgba(42, 94, 176, 0.35); color: rgba(215, 230, 255, 0.92); box-shadow: inset 0 0 0 1px rgba(21, 33, 60, 0.6); } :root:not([data-bs-theme="light"]) .publication-theme-tag::before { background: #4c8cff; box-shadow: 0 0 0 2px rgba(42, 94, 176, 0.32); } :root:not([data-bs-theme="light"]) .publication-theme-tag--law { border-color: rgba(129, 216, 171, 0.4); background: rgba(41, 112, 69, 0.38); color: rgba(222, 249, 236, 0.92); } :root:not([data-bs-theme="light"]) .publication-theme-tag--law::before { background: #45c487; box-shadow: 0 0 0 2px rgba(41, 112, 69, 0.32); } :root:not([data-bs-theme="light"]) .publication-theme-tag--crypto { border-color: rgba(204, 165, 255, 0.4); background: rgba(86, 44, 156, 0.4); color: rgba(243, 231, 255, 0.9); } :root:not([data-bs-theme="light"]) .publication-theme-tag--crypto::before { background: #a472ff; box-shadow: 0 0 0 2px rgba(86, 44, 156, 0.32); } :root:not([data-bs-theme="light"]) .publication-theme-tag--security { border-color: rgba(118, 182, 255, 0.4); background: rgba(46, 94, 160, 0.4); color: rgba(220, 235, 255, 0.92); } :root:not([data-bs-theme="light"]) .publication-theme-tag--security::before { background: #4c8cff; box-shadow: 0 0 0 2px rgba(46, 94, 160, 0.32); } } .page-publications .publications-page h3 { margin: 1.8rem 0 0.75rem; display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.32rem; letter-spacing: 0.01em; } .page-publications .publications-page h3::after { content: ""; flex: 1; height: 1px; min-width: 2.5rem; background: linear-gradient(90deg, rgba(40, 109, 192, 0.6), transparent); } .page-publications .publications-page ol.bibliography { margin: 0; padding-left: 1.65rem; display: grid; gap: 1.1rem; } .page-publications .publications-page ol.bibliography > li { list-style-position: outside; padding-left: 0.7rem; border-left: 3px solid rgba(40, 109, 192, 0.35); transition: border-color 0.2s ease; } .page-publications .publications-page ol.bibliography > li:hover, .page-publications .publications-page ol.bibliography > li:focus-within { border-left-color: rgba(40, 109, 192, 0.65); } .page-publications .bibliography .btn-bib { display: inline-flex; align-items: center; justify-content: center; margin-right: 0.4rem; margin-top: 0.35rem; padding: 0.28rem 0.75rem; border-radius: 999px; border: 1px solid rgba(40, 109, 192, 0.3); background: rgba(255, 255, 255, 0.92); color: rgba(18, 47, 86, 0.85); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .page-publications .bibliography .btn-bib:last-of-type { margin-right: 0; } .page-publications .bibliography .btn-bib:hover, .page-publications .bibliography .btn-bib:focus { border-color: rgba(40, 109, 192, 0.6); background: rgba(40, 109, 192, 0.9); color: #fff; } .page-publications .bibliography pre { background: rgba(15, 38, 70, 0.08); border-radius: 12px; padding: 0.75rem 1rem; max-width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } #publications .yearselector-control { position: relative; display: inline-flex; align-items: center; margin-left: 0.5rem; } #publications .yearselector-control::before { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 3rem; border-radius: 999px; background: linear-gradient(180deg, rgba(206, 221, 248, 0.46), rgba(255, 255, 255, 0)); z-index: 2; pointer-events: none; } #publications .yearselector-control::after { content: ""; position: absolute; right: 0.95rem; top: 50%; width: 0; height: 0; border-left: 0.38rem solid transparent; border-right: 0.38rem solid transparent; border-top: 0.5rem solid #1a416a; transform: translateY(-30%); z-index: 3; pointer-events: none; } #publications select[data-yearselector] { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; z-index: 1; font-family: inherit; font-size: 0.95rem; padding: 0.38rem 2.7rem 0.38rem 0.95rem; border-radius: 999px; border: 1px solid rgba(40, 109, 192, 0.52); background-color: rgba(255, 255, 255, 0.96); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(226, 236, 255, 0.9)); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; color: rgba(18, 47, 86, 0.94); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } #publications select[data-yearselector]:hover { border-color: rgba(40, 109, 192, 0.72); box-shadow: 0 0 0 0.2rem rgba(40, 109, 192, 0.2); background-color: #ffffff; outline: none; } #publications select[data-yearselector]:focus, #publications select[data-yearselector]:focus-visible { border-color: rgba(40, 109, 192, 0.78); box-shadow: 0 0 0 0.22rem rgba(40, 109, 192, 0.22); outline: none; } @media (max-width: 640px) { .page-publications .publications-page { gap: 1.6rem; } .page-publications .publications-lede { padding: 1.1rem 1.2rem; border-left-width: 3px; } .page-publications .publications-page > h2 { gap: 0.55rem; } .page-publications #publications select[data-yearselector] { width: 100%; justify-self: stretch; } .page-publications #publications .yearselector-control { width: 100%; margin-left: 0; } .page-publications .publications-page ol.bibliography { padding-left: 1.35rem; gap: 0.9rem; } } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .page-publications .publications-lede { background: rgba(20, 45, 85, 0.5); border-left-color: rgba(160, 196, 255, 0.6); box-shadow: 0 1.2rem 2.2rem rgba(5, 12, 28, 0.65); } :root:not([data-bs-theme="light"]) .page-publications .publications-theme { background: rgba(124, 169, 255, 0.18); border-color: rgba(124, 169, 255, 0.38); color: rgba(220, 233, 255, 0.9); } :root:not([data-bs-theme="light"]) .page-publications .publications-page h3::after { background: linear-gradient(90deg, rgba(124, 169, 255, 0.65), transparent); } :root:not([data-bs-theme="light"]) .page-publications .publications-page ol.bibliography > li { border-left-color: rgba(124, 169, 255, 0.45); } :root:not([data-bs-theme="light"]) .page-publications .bibliography .btn-bib { background: rgba(20, 45, 85, 0.85); color: rgba(220, 233, 255, 0.92); border-color: rgba(124, 169, 255, 0.4); } :root:not([data-bs-theme="light"]) .page-publications .bibliography .btn-bib:hover, :root:not([data-bs-theme="light"]) .page-publications .bibliography .btn-bib:focus { background: rgba(124, 169, 255, 0.9); color: #0b1630; } :root:not([data-bs-theme="light"]) .page-publications .bibliography pre { background: rgba(9, 22, 45, 0.72); } :root:not([data-bs-theme="light"]) #publications select[data-yearselector] { background-color: rgba(14, 32, 62, 0.88); border-color: rgba(124, 169, 255, 0.45); color: rgba(220, 233, 255, 0.9); background-image: linear-gradient(135deg, rgba(14, 32, 62, 0.88), rgba(32, 56, 92, 0.88)); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; } :root:not([data-bs-theme="light"]) #publications select[data-yearselector]:hover { border-color: rgba(160, 196, 255, 0.65); box-shadow: 0 0 0 0.2rem rgba(124, 169, 255, 0.25); } :root:not([data-bs-theme="light"]) #publications .yearselector-control::before { background: linear-gradient(180deg, rgba(70, 108, 170, 0.42), rgba(14, 32, 62, 0)); } :root:not([data-bs-theme="light"]) #publications .yearselector-control::after { border-top-color: rgba(220, 233, 255, 0.95); } :root:not([data-bs-theme="light"]) .page-home .home-section__lede, :root:not([data-bs-theme="light"]) .page-home .home-teaching-meta, :root:not([data-bs-theme="light"]) .page-home .home-people__meta, :root:not([data-bs-theme="light"]) .page-home .home-people__note { color: rgba(214, 229, 255, 0.78); } :root:not([data-bs-theme="light"]) .page-home .home-alerts .alert { box-shadow: 0 0.7rem 1.9rem rgba(5, 12, 28, 0.6); } :root:not([data-bs-theme="light"]) .page-home .home-interest { background: rgba(90, 161, 255, 0.2); } :root:not([data-bs-theme="light"]) .page-home .home-teaching-term, :root:not([data-bs-theme="light"]) .page-home .home-teaching-code { background: rgba(90, 161, 255, 0.2); color: rgba(214, 229, 255, 0.92); } } html[data-bs-theme="light"] .page-publications .publications-theme { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0.45rem 1.25rem rgba(15, 32, 68, 0.08); } html[data-bs-theme="light"] .page-publications .publications-theme[data-theme-id="security"] { border-color: rgba(40, 109, 192, 0.8); color: #0f2f58; background: rgba(40, 109, 192, 0.18); } html[data-bs-theme="light"] .page-publications .publications-theme[data-theme-id="law"] { border-color: rgba(47, 157, 93, 0.8); color: #12482a; background: rgba(47, 157, 93, 0.18); } html[data-bs-theme="light"] .page-publications .publications-theme[data-theme-id="crypto"] { border-color: rgba(122, 61, 216, 0.8); color: #32186b; background: rgba(122, 61, 216, 0.18); } .page-teaching .teaching-nav-link { display: inline-flex; align-items: center; padding: 0.2rem 0; border: 0; border-bottom: 1px solid color-mix(in oklab, var(--color-accent-vivid) 30%, transparent); border-radius: 0; background: transparent; font-size: 0.92rem; font-weight: 400; text-decoration: none; color: var(--color-link-strong); transition: border-color .16s ease, color .16s ease; } .page-teaching .teaching-nav-link:focus, .page-teaching .teaching-nav-link:hover { background: transparent; border-color: var(--color-accent-vivid); color: var(--color-heading); } .page-teaching .teaching-section { display: flex; flex-direction: column; gap: 1.75rem; } .page-teaching .teaching-section-header { display: flex; flex-direction: column; gap: 0.3rem; max-width: var(--max-measure); } .page-teaching .section-blurb { margin: 0; color: #4b5a6d; font-size: 1rem; } .page-teaching .teaching-subheading { margin-bottom: 0; letter-spacing: 0; text-transform: none; font-size: 1.15rem; color: var(--color-heading); font-weight: 600; } .page-teaching .teaching-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border-top: 1px solid var(--surface-card-border); } .page-teaching .teaching-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.32rem; padding: 1.05rem 1.15rem; border-radius: 0; border-right: 1px solid var(--surface-card-border); background: transparent; box-shadow: none; min-height: 100%; } .page-teaching .teaching-code { display: inline; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; border-radius: 0; background: transparent; color: var(--bs-secondary-color); font-weight: 500; } .page-teaching .teaching-title { margin: 0; font-size: 1.04rem; line-height: 1.35; font-weight: 500; } .page-teaching .teaching-title a { text-decoration: none; } .page-teaching .teaching-title a:hover, .page-teaching .teaching-title a:focus { text-decoration: underline; } .page-teaching .teaching-institution { margin: 0; font-size: 0.95rem; color: #4b5a6d; } .page-teaching .teaching-card p { text-align: left; } .page-teaching .teaching-terms { display: flex; flex-wrap: wrap; gap: 0; color: var(--bs-secondary-color); } .page-teaching .teaching-term { display: inline; padding: 0; border-radius: 0; background: transparent; font-size: 0.875rem; font-weight: 400; } .page-teaching .teaching-term:not(:last-child)::after { content: " · "; white-space: pre; color: color-mix(in oklab, var(--color-accent-vivid) 65%, var(--bs-secondary-color)); } .page-teaching .teaching-term a { text-decoration: none; } .page-teaching .teaching-term a:hover, .page-teaching .teaching-term a:focus { text-decoration: underline; } .page-teaching .teaching-note { margin: 0; font-size: 1rem; text-align: center; color: #4b5a6d; } html[data-bs-theme="light"] .page-teaching .section-blurb, html[data-bs-theme="light"] .page-teaching .teaching-institution, html[data-bs-theme="light"] .page-teaching .teaching-note { color: #4b5a6d; } html[data-bs-theme="light"] .page-teaching .teaching-card { --glass-bg: var(--surface-card-bg); --glass-border: var(--surface-card-border); --glass-shadow: var(--surface-card-shadow); color: #18314f; } html[data-bs-theme="light"] .page-teaching .teaching-title, html[data-bs-theme="light"] .page-teaching .teaching-title a { color: #18314f; } html[data-bs-theme="light"] .page-teaching .teaching-code, html[data-bs-theme="light"] .page-teaching .teaching-term { background: transparent; color: #52647a; } html[data-bs-theme="light"] .page-teaching .teaching-term a { color: inherit; } .page-teaching .teaching-philosophy { gap: 1.1rem; } .page-teaching .teaching-philosophy h3 { margin-top: 1.2rem; } @media (max-width: 640px) { .page-teaching .teaching-card { padding: 1rem 1.1rem; border-right: 0; border-bottom: 1px solid var(--surface-card-border); } .page-teaching .teaching-card:last-child { border-bottom: 0; } .page-teaching .teaching-nav-link { width: auto; justify-content: flex-start; } .page-teaching .teaching-collapse { padding: 0 0.8rem; } } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .page-teaching .section-blurb, :root:not([data-bs-theme="light"]) .page-teaching .teaching-institution, :root:not([data-bs-theme="light"]) .page-teaching .teaching-note { color: rgba(229, 236, 250, 0.8); } :root:not([data-bs-theme="light"]) .page-teaching .teaching-summary-count, :root:not([data-bs-theme="light"]) .page-teaching .teaching-summary::after { color: rgba(214, 229, 255, 0.75); } :root:not([data-bs-theme="light"]) .page-teaching .teaching-code, :root:not([data-bs-theme="light"]) .page-teaching .teaching-term { background: transparent; color: rgba(214, 229, 255, 0.9); } :root:not([data-bs-theme="light"]) .page-teaching .teaching-nav-link { border-color: rgba(102, 150, 255, 0.35); background: transparent; } :root:not([data-bs-theme="light"]) .page-teaching .teaching-nav-link:focus, :root:not([data-bs-theme="light"]) .page-teaching .teaching-nav-link:hover { background: transparent; border-color: rgba(102, 150, 255, 0.6); } } /* Fade-in animation for AJAX-loaded content */ .js.reveals-enabled .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .js.reveals-enabled .reveal.visible { opacity: 1; transform: none; } @supports (animation-timeline: view()) { @keyframes scroll-driven-reveal { from { opacity: 0.2; transform: translateY(1rem) scale(0.992); filter: blur(2px); } to { opacity: 1; transform: none; filter: blur(0); } } .js.reveals-enabled.has-scroll-driven-reveals .reveal { opacity: 1; transform: none; transition: none; animation: scroll-driven-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; } .js.reveals-enabled.has-scroll-driven-reveals .reveal.visible { animation: none; } } @keyframes ajaxFadeIn { from { opacity: 0; } to { opacity: 1; } } #content.ajax-fade { animation: ajaxFadeIn .25s ease; } @media (prefers-reduced-motion: reduce) { .js.reveals-enabled .reveal, .js.reveals-enabled.has-scroll-driven-reveals .reveal { opacity: 1; transform: none; filter: none; animation: none; transition: none; } #content.ajax-fade { animation: none; } } .year-filter { margin-bottom: 1rem; } .year-filter .form-label { font-weight: 500; margin-right: .5rem; } .year-filter .form-select { width: auto; padding: .25rem .5rem; font-size: .875rem; } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .btn-bib { border-color: #5aa1ff; color: #5aa1ff; } :root:not([data-bs-theme="light"]) .btn-bib:hover { background: rgba(90, 161, 255, 0.95); } :root:not([data-bs-theme="light"]) #name { color: #f5defd; text-decoration: underline; text-decoration-color: #9a1cc6; text-underline-offset: 3px; } :root:not([data-bs-theme="light"]) #name:visited { color: #f5defd; } :root:not([data-bs-theme="light"]) #name:hover, :root:not([data-bs-theme="light"]) #name:focus { color: #f14e32; } } html[data-bs-theme="dark"] .btn-bib { border-color: #5aa1ff; color: #5aa1ff; } html[data-bs-theme="dark"] .btn-bib:hover { background: rgba(90, 161, 255, 0.95); } html[data-bs-theme="dark"] #name { color: #f5defd; text-decoration: underline; text-decoration-color: #9a1cc6; text-underline-offset: 3px; } html[data-bs-theme="dark"] #name:visited { color: #f5defd; } html[data-bs-theme="dark"] #name:hover, html[data-bs-theme="dark"] #name:focus { color: #f14e32; } #back-to-top { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); width: 2.4rem; height: 2.4rem; background: var(--color-control-bg); border: 1px solid var(--accent-28); border-radius: 50%; box-shadow: 0 3px 12px rgba(29, 55, 90, 0.1); color: var(--color-link); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1rem; z-index: 1000; opacity: 0; transform: translateY(0.4rem) scale(0.96); visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } #back-to-top .icon-chevron-up { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } #back-to-top.show { opacity: .82; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; } #back-to-top:hover, #back-to-top:focus-visible { color: var(--color-control-hover); border-color: var(--accent-45); box-shadow: 0 4px 14px rgba(29, 55, 90, 0.16); opacity: 1; transform: translateY(-1px); outline: none; } html[data-bs-theme="dark"] #back-to-top { background: var(--color-control-bg); border-color: var(--accent-32); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2); color: var(--color-link); } html[data-bs-theme="dark"] #back-to-top:hover, html[data-bs-theme="dark"] #back-to-top:focus-visible { border-color: var(--accent-45); color: var(--color-control-hover); } .site-footer { text-align: center; padding: 2.5rem 1rem 3.5rem; font-size: 0.9rem; color: var(--color-muted); } html[data-bs-theme="light"] .site-footer { color: var(--color-muted); } html[data-bs-theme="dark"] .site-footer { color: var(--color-muted); } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) html:not([data-bs-theme]) .site-footer { color: rgba(214, 229, 255, 0.7); } } @media screen and (max-width: 600px) { #back-to-top { right: .75rem; bottom: .75rem; width: 2.5rem; height: 2.5rem; } } @media (prefers-reduced-motion: reduce) { #back-to-top { transition: none; } } .semester-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; } .semester-link:hover, .semester-link:focus { border-bottom-style: solid; border-color: #286dc0; text-decoration: none; } h3 { margin-top: 1rem; margin-bottom: 0.5rem; } .awards-list { list-style: none; margin: 0 0 1.5rem 0.9rem; padding: 0; display: grid; gap: .55rem; } .awards-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .65rem .85rem; border-radius: 12px; background: var(--glass-bg, linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(230, 238, 255, 0.4))); border: 1px solid rgba(40, 109, 192, 0.1); box-shadow: 0 0.35rem 0.85rem rgba(12, 32, 67, 0.055); position: relative; overflow: hidden; } .awards-list li::before { content: ""; position: absolute; inset: -45% auto auto -40%; width: 55%; height: 160%; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), transparent 65%); pointer-events: none; } .awards-list .what { display: grid; gap: .12rem; color: #1f3454; font-weight: 400; line-height: 1.35; } .awards-list .award-title { min-width: 0; color: #1f3454; font-weight: 600; letter-spacing: -.005em; } .awards-list .award-title a { display: inline; padding: 0; border: 0; background: transparent; color: inherit; font-weight: inherit; text-decoration-line: underline; text-decoration-color: color-mix(in oklab, currentColor 22%, transparent); text-decoration-thickness: .055em; text-underline-offset: .18em; text-decoration-skip-ink: auto; transition: text-decoration-color 150ms ease, text-decoration-thickness 150ms ease; } .awards-list .award-title a:visited { color: inherit; } .awards-list .award-title a:is(:hover, :focus-visible) { color: inherit; text-decoration-color: color-mix(in oklab, currentColor 52%, transparent); text-decoration-thickness: .075em; } .awards-list .award-title a:focus-visible { outline: 2px solid color-mix(in oklab, var(--color-accent-vivid) 55%, transparent); outline-offset: 2px; } .awards-list .award-meta { display: flex; flex-wrap: wrap; align-items: baseline; color: #4f6a8c; font-size: .9rem; font-weight: 400; line-height: 1.35; } .awards-list .award-meta > span + span::before { content: "·"; margin: 0 .42rem 0 .32rem; color: color-mix(in oklab, currentColor 55%, transparent); } .awards-list .award-note { color: color-mix(in oklab, currentColor 84%, var(--color-text)); } .awards-list .year { font-size: .9rem; font-weight: 500; color: #3b5d88; text-align: right; white-space: nowrap; } @media (max-width: 640px) { .awards-list { margin-left: 0.6rem; } .awards-list li { grid-template-columns: 1fr; } .awards-list .year { justify-self: start; } } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .awards-list li { background: linear-gradient(135deg, rgba(22, 30, 54, 0.68), rgba(12, 18, 34, 0.56)); border-color: rgba(112, 160, 252, 0.15); box-shadow: 0 0.4rem 1rem rgba(3, 7, 18, 0.32); } :root:not([data-bs-theme="light"]) .awards-list li::before { background: radial-gradient(circle at top left, rgba(214, 229, 255, 0.28), transparent 65%); } :root:not([data-bs-theme="light"]) .awards-list .what, :root:not([data-bs-theme="light"]) .awards-list .award-title { color: rgba(229, 234, 248, 0.95); } :root:not([data-bs-theme="light"]) .awards-list .award-meta { color: rgba(160, 192, 255, 0.78); } :root:not([data-bs-theme="light"]) .awards-list .year { color: rgba(214, 229, 255, 0.85); } } .bio-text, .bio-short { max-width: min(92vw, 68ch); margin-inline: auto; font-size: clamp(1.06rem, 0.98rem + 0.45vw, 1.28rem); line-height: 1.55; letter-spacing: 0; text-align: left; text-wrap: wrap; hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; font-optical-sizing: auto; font-variant-numeric: oldstyle-nums proportional-nums; text-rendering: optimizeLegibility; margin: 0 auto inherit auto; } .bio-text { font-size: 1.08rem; max-width: min(92vw, 77ch); } .bio-text strong, .bio-short strong { font-variant: small-caps; letter-spacing: 0.04em; } #main-nav .sep { opacity: .5; } #main-nav .nav-link { position: relative; display: inline-block; padding: 0.05rem 0.1rem; text-decoration: none; } #main-nav .nav-link.is-pending:not(.is-active) { color: #286dc0; } #main-nav .nav-link.is-active { font-weight: 600; color: inherit; } #main-nav .nav-link.is-active::after { content: ""; position: absolute; left: 0.05rem; right: 0.05rem; bottom: -0.05rem; height: 2px; border-radius: 999px; background: currentColor; opacity: 0.7; } @media (min-width: 992px) { .tooltip { --bs-tooltip-max-width: 300px; } } .bio-controls { display: flex; justify-content: flex-end; gap: 0.85rem; max-width: min(92vw, 68ch); margin: 0.65rem auto 0; } .bio-btn { appearance: none; display: inline-block; padding: 0.15rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--color-muted); font: inherit; font-size: 0.875rem; line-height: 1.3; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.18em; cursor: pointer; transition: color 150ms ease, text-decoration-color 150ms ease; } .bio-btn + .bio-btn { padding-left: 0.85rem; border-left: 1px solid var(--accent-18); } .bio-btn:hover, .bio-btn:focus-visible { background: none; color: var(--color-link-strong); text-decoration-color: currentColor; } a:focus-visible, .bio-btn:focus-visible { outline: 2px solid #b7abff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { a, .bio-btn { transition: none; } } @media (max-width: 560px) { .awards-list li { flex-wrap: wrap; } .awards-list .year { flex-basis: 100%; text-align: left; opacity: .8; margin-left: 0; margin-top: .15rem; } } .content hr { margin: var(--vspace) 0; opacity: .15; } .alert.bio-alert { margin-block: var(--vspace); padding: .85rem 1rem; background-color: rgba(41, 99, 246, 0.2); border-color: rgba(41, 99, 246, 0.38); } @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .alert.bio-alert { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.38); } } html[data-bs-theme="dark"] .alert.bio-alert { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.38); } #bio { margin-block: var(--vspace) calc(var(--vspace) * 1.2); } #bio p { margin: 0 0 calc(var(--vspace) * 0.75); line-height: 1.55; } #bio p:last-child { margin-bottom: 0; } #bio .text-center { margin-top: var(--vspace); } #main-nav { margin-bottom: calc(var(--vspace) * 0.9); padding-bottom: 0.35rem; line-height: 1.8; } /* Compact content controls should read as small lenses, not outlined badges. The existing component styles remain the compatibility fallback; browsers with CSS Color 4 support get one perceptual gradient rim and a quiet sheen. */ @supports (color: color-mix(in oklab, white, black)) { html[data-style="rich"] { --glass-pill-sheen: color-mix(in oklab, white 36%, transparent); --glass-pill-sheen-soft: color-mix(in oklab, white 7%, transparent); --glass-pill-shadow: color-mix(in oklab, var(--color-heading) 4%, transparent); --glass-pill-edge-light: color-mix(in oklab, white 48%, transparent); --glass-pill-fill-strength: 8%; --glass-pill-edge-strength: 20%; } html[data-bs-theme="dark"][data-style="rich"] { --glass-pill-sheen: color-mix(in oklab, white 10%, transparent); --glass-pill-sheen-soft: color-mix(in oklab, white 2%, transparent); --glass-pill-shadow: color-mix(in oklab, black 16%, transparent); --glass-pill-edge-light: color-mix(in oklab, white 18%, transparent); --glass-pill-fill-strength: 12%; --glass-pill-edge-strength: 28%; } html[data-style="rich"] :is( .page-publications .publications-theme, .page-publications .publication-theme-tag, .page-publications .bibliography .btn-bib, .page-joining .joining-nav a ), html[data-style="rich"] .page-publications #publications select[data-yearselector] { --glass-pill-tint: var(--color-accent-vivid); border: 1px solid transparent; background: linear-gradient(145deg, var(--glass-pill-sheen), transparent 48%) padding-box, linear-gradient(135deg, color-mix(in oklab, var(--glass-pill-tint) var(--glass-pill-fill-strength), transparent), var(--glass-pill-sheen-soft)) padding-box, linear-gradient(135deg, var(--glass-pill-edge-light), color-mix(in oklab, var(--glass-pill-tint) var(--glass-pill-edge-strength), transparent) 48%, color-mix(in oklab, var(--glass-pill-tint) 10%, transparent)) border-box; box-shadow: inset 0 1px 0 color-mix(in oklab, white 14%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--glass-pill-tint) 4%, transparent), 0 0.18rem 0.45rem var(--glass-pill-shadow); transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 120ms ease; } html[data-style="rich"] :is( .page-publications .publications-theme, .page-publications .bibliography .btn-bib, .page-joining .joining-nav a ):is(:hover, :focus-visible), html[data-style="rich"] .page-publications #publications select[data-yearselector]:is(:hover, :focus-visible) { --glass-pill-fill-strength: 12%; --glass-pill-edge-strength: 30%; box-shadow: inset 0 1px 0 color-mix(in oklab, white 20%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--glass-pill-tint) 6%, transparent), 0 0.22rem 0.55rem var(--glass-pill-shadow); transform: translateY(-1px); } html[data-style="rich"] .page-publications .publications-theme.is-active { --glass-pill-fill-strength: 18%; --glass-pill-edge-strength: 36%; color: var(--color-link-strong); } html[data-bs-theme="dark"][data-style="rich"] .page-publications .publications-theme.is-active { color: var(--color-heading); } html[data-style="rich"] .page-publications :is( .publications-theme[data-theme-id="law"], .publication-theme-tag.publication-theme-tag--law ) { --glass-pill-tint: oklch(62% 0.145 151); } html[data-style="rich"] .page-publications :is( .publications-theme[data-theme-id="crypto"], .publication-theme-tag.publication-theme-tag--crypto ) { --glass-pill-tint: oklch(60% 0.19 302); } html[data-style="rich"] .page-publications :is( .publications-theme[data-theme-id="security"], .publication-theme-tag.publication-theme-tag--security ) { --glass-pill-tint: var(--color-accent-vivid); } html[data-style="rich"] .page-publications .publication-theme-tag::before { background: var(--glass-pill-tint); box-shadow: inset 0 1px 0 color-mix(in oklab, white 55%, transparent), 0 0 0.38rem color-mix(in oklab, var(--glass-pill-tint) 38%, transparent); } html[data-style="rich"] .page-publications #publications .yearselector-control::before { background: linear-gradient(180deg, color-mix(in oklab, white 22%, transparent), transparent); } html[data-bs-theme="dark"][data-style="rich"] .page-publications #publications .yearselector-control::before { background: linear-gradient(180deg, color-mix(in oklab, white 8%, transparent), transparent); } @media (max-width: 640px) { html[data-style="rich"] .page-publications #publications .yearselector-control, html[data-style="rich"] .page-publications #publications select[data-yearselector] { width: auto; } } } @page { margin: 0.75in 0.8in; } @media print { *, *::before, *::after { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } html, body { background: #fff !important; } body { color: #000 !important; font-size: 12pt; line-height: 1.4; } #back-to-top, #pronounce-btn, #pronounce-audio, nav#main-nav { display: none !important; } .content { max-width: none !important; width: auto !important; } a, a:visited { color: #000 !important; text-decoration: underline; } a[href]::after { content: "" !important; } #headshot { display: block !important; margin: 0 0 .2in 0 !important; } #headshot img { max-width: 1.1in !important; height: auto !important; border: none !important; } .alert { background: transparent !important; border-color: #999 !important; color: #000 !important; } .alert-dismissible { display: none !important; } .btn, .btn-bib, .badge { background: transparent !important; border: 1px solid #999 !important; color: #000 !important; box-shadow: none !important; } .btn-bib { display: none !important; } #publications ol.bibliography li { display: list-item !important; } #publications select[data-yearselector] { display: none !important; } #publications h1, #publications h2, #publications h3 { display: block !important; align-items: normal !important; margin-bottom: .25rem !important; } #publications .caption { margin-top: .15rem !important; margin-bottom: .35rem !important; } #publications ol.bibliography { margin-top: 0 !important; } #full-bio { display: block !important; visibility: visible !important; } #short-bio { display: none !important; } #bio-toggle, #person-toggle { display: none !important; } #bio .bio-text, #bio .bio-short { margin: 0 auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .reveal.visible { opacity: 1 !important; transform: none !important; } .collapse { display: block !important; height: auto !important; } h1, h2, h3, h4, h5, h6 { break-after: avoid; page-break-after: avoid; } table, pre, blockquote, figure, .card, .alert { break-inside: avoid; page-break-inside: avoid; } thead { display: table-header-group; } img, tr { break-inside: avoid; page-break-inside: avoid; } h1 { font-size: 22pt; } h2 { font-size: 16pt; } h3 { font-size: 13pt; } h4, h5, h6 { font-size: 11pt; } hr { border: 0; border-top: 1px solid #aaa; opacity: 1; margin: 0.6rem 0; } #header { margin-bottom: .5rem; gap: .5rem; } #bio .text-center { margin-top: .6rem; } img { max-width: 100% !important; height: auto !important; } } /* ========================================================================= Minimal layout style (html[data-style="minimal"]) ------------------------------------------------------------------------- A flattened, single-column, hairline-separated take on the site, inspired by clean academic homepages. This is a pure CSS overlay: it changes no markup and preserves every piece of content. It works on top of the existing light/dark axis (data-bs-theme), which stays independent. Imported last so its ties with themed rules resolve in its favour. ========================================================================= */ html[data-style="minimal"] { --min-bg: #ffffff; --min-fg: #1c1c1c; --min-muted: #5c5c5c; --min-rule: rgba(0, 0, 0, 0.14); --min-heading: #111111; --min-link: #15467e; --min-link-hover: #0b2f57; --min-accent: rgba(40, 109, 192, 0.55); background: var(--min-bg) !important; background-image: none !important; } html[data-style="minimal"][data-bs-theme="dark"] { --min-bg: #131417; --min-fg: rgba(236, 236, 238, 0.9); --min-muted: rgba(198, 200, 206, 0.66); --min-rule: rgba(255, 255, 255, 0.16); --min-heading: #f3f3f5; --min-link: #9db8e8; --min-link-hover: #c7d6f2; --min-accent: rgba(140, 180, 248, 0.6); } @supports (color: oklch(50% 0.1 250)) and (color: color-mix(in oklab, white, black)) { html[data-style="minimal"] { --min-bg: oklch(100% 0 0); --min-fg: oklch(22.64% 0 0); --min-muted: oklch(47.48% 0 0); --min-rule: color-mix(in oklab, black 14%, transparent); --min-heading: oklch(17.76% 0 0); --min-link: oklch(39.38% 0.1078 254.6); --min-link-hover: oklch(30.43% 0.0826 254.1); --min-accent: color-mix(in oklab, oklch(53.57% 0.1468 255.3) 55%, transparent); } html[data-style="minimal"][data-bs-theme="dark"] { --min-bg: oklch(19.15% 0.0062 271.1); --min-fg: oklch(94% 0.005 270 / 0.9); --min-muted: oklch(82% 0.008 270 / 0.66); --min-rule: color-mix(in oklab, white 16%, transparent); --min-heading: oklch(96% 0.005 270); --min-link: oklch(77.95% 0.0751 261.8); --min-link-hover: oklch(87.36% 0.0421 263); --min-accent: color-mix(in oklab, oklch(79% 0.1 258) 60%, transparent); } } /* ---- Page canvas: flat, no gradient / noise / blur ---------------------- */ html[data-style="minimal"] body { background: var(--min-bg) !important; background-image: none !important; color: var(--min-fg); } html[data-style="minimal"] body::before, html[data-style="minimal"] body::after { display: none !important; } /* ---- Kill the liquid-glass treatment everywhere ------------------------- */ html[data-style="minimal"] .liquid-glass { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; isolation: auto !important; } html[data-style="minimal"] .liquid-glass::before, html[data-style="minimal"] .liquid-glass::after { display: none !important; } /* ---- Reading measure & typography -------------------------------------- */ html[data-style="minimal"] .content, html[data-style="minimal"] .page-home .content { width: min(92vw, 760px); } html[data-style="minimal"] p { text-align: left; } html[data-style="minimal"] a { color: var(--min-link); text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.14em; } html[data-style="minimal"] a:hover, html[data-style="minimal"] a:focus { color: var(--min-link-hover); text-decoration-color: currentColor; } html[data-style="minimal"] #heading h1, html[data-style="minimal"] h2, html[data-style="minimal"] h3, html[data-style="minimal"] h4 { color: var(--min-heading); } html[data-style="minimal"] #heading h1 { font-size: 2.35rem; } /* The name is a link home; keep it undecorated in the minimal layout. */ html[data-style="minimal"] #name, html[data-style="minimal"] #name:hover, html[data-style="minimal"] #name:focus { text-decoration: none; color: var(--min-heading); } html[data-style="minimal"] h2 { font-size: 1.5rem; font-weight: 600; } html[data-style="minimal"] h3 { font-size: 1.2rem; } html[data-style="minimal"] #heading h5, html[data-style="minimal"] h5 { color: var(--min-muted); } /* ---- Header / headshot ------------------------------------------------- */ html[data-style="minimal"] #headshot img { border: 1px solid var(--min-rule); border-radius: 4px; } html[data-style="minimal"] #header + * hr, html[data-style="minimal"] hr { border: 0; border-top: 1px solid var(--min-rule); opacity: 1; } /* ---- Home: overall rhythm ---------------------------------------------- */ html[data-style="minimal"] .page-home .home-page { gap: 1.75rem; } /* Hero: stack bio and positions, no card ------------------------------- */ html[data-style="minimal"] .page-home .home-hero { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; } html[data-style="minimal"] .page-home .home-hero-card, html[data-style="minimal"] .page-home .home-positions { padding: 0; display: block; } html[data-style="minimal"] .page-home .home-positions { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--min-rule); } html[data-style="minimal"] .page-home .home-positions h2 { font-size: 1.15rem; margin-bottom: 0.75rem; } /* Recruiting alert: quiet left-rule note ------------------------------- */ html[data-style="minimal"] .page-home .home-alerts .alert { border: 0 !important; border-left: 3px solid var(--min-accent) !important; border-radius: 0; background: none !important; box-shadow: none !important; padding: 0.15rem 0 0.15rem 1rem; } /* Sections: hairline dividers instead of boxes ------------------------- */ html[data-style="minimal"] .page-home .home-section { display: block; padding: 0; padding-top: 1.75rem; border-top: 1px solid var(--min-rule); } html[data-style="minimal"] .page-home .home-section__header { margin-bottom: 1rem; } html[data-style="minimal"] .page-home .home-section__lede { color: var(--min-muted); } /* In-page nav: plain underlined links ---------------------------------- */ html[data-style="minimal"] .page-home .home-local-nav { gap: 1.25rem; } html[data-style="minimal"] .page-home .home-nav-link { padding: 0; border: 0; border-radius: 0; background: none; text-decoration: underline; color: var(--min-link); } html[data-style="minimal"] .page-home .home-nav-link:hover, html[data-style="minimal"] .page-home .home-nav-link:focus { background: none; border: 0; transform: none; color: var(--min-link-hover); } /* Positions: flatten the animated chip stack into a plain list --------- */ html[data-style="minimal"] .page-home .home-position-chips { display: block; } html[data-style="minimal"] .page-home .home-position-stack { position: static !important; display: block !important; min-height: 0 !important; gap: 0; } html[data-style="minimal"] .page-home .home-position-order, html[data-style="minimal"] .page-home .home-position-logo-wrap, html[data-style="minimal"] .page-home .home-position-stack-toggle { display: none !important; } html[data-style="minimal"] .page-home .home-position-chip { position: static !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; height: auto !important; min-height: 0 !important; margin: 0 0 0.9rem !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--min-fg) !important; cursor: default !important; overflow: visible !important; } /* undo the collapsed/expanded stack hiding of secondary chips */ html[data-style="minimal"] .page-home .home-position-chip .home-position-content, html[data-style="minimal"] .page-home .home-position-chip .home-position-order { opacity: 1 !important; } html[data-style="minimal"] .page-home .home-position-content { display: block; min-height: 0; } html[data-style="minimal"] .page-home .home-position-role { color: var(--min-fg); -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; display: block; } html[data-style="minimal"] .page-home .home-position-org, html[data-style="minimal"] .page-home .home-position-note { color: var(--min-muted); -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; display: block; } html[data-style="minimal"] .page-home .home-position-years { position: static !important; text-align: left !important; color: var(--min-muted); font-weight: 500; margin-top: 0.1rem; } /* Teaching: cards -> plain list --------------------------------------- */ html[data-style="minimal"] .page-home .home-teaching-grid { display: block; } html[data-style="minimal"] .page-home .home-teaching-card { display: block; padding: 0; margin-bottom: 1.1rem; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; } html[data-style="minimal"] .page-home .home-teaching-code { padding: 0; background: none; color: var(--min-muted); letter-spacing: 0.1em; } html[data-style="minimal"] .page-home .home-teaching-meta { color: var(--min-muted); } html[data-style="minimal"] .page-home .home-teaching-term { padding: 0; background: none; color: var(--min-muted); } html[data-style="minimal"] .page-home .home-teaching-terms { gap: 0.35rem 0.9rem; } /* People card grid: keep two columns (no chrome) so the many-name lists don't stack into one very long single column. */ html[data-style="minimal"] .page-home .home-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem; align-items: start; } html[data-style="minimal"] .page-home .home-card-column { gap: 1.75rem; } html[data-style="minimal"] .page-home .home-card { padding: 0; margin-bottom: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; } /* Tighter rows; keep an aligned name | year layout so the years line up in a column instead of sitting at ragged offsets. Current destinations sit below the name instead of competing with the year column. */ html[data-style="minimal"] .page-home .home-people { gap: 0.5rem; } html[data-style="minimal"] .page-home .home-people__item, html[data-style="minimal"] .page-home #undergraduates .home-people__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.05rem 0.8rem; align-items: baseline; } html[data-style="minimal"] .page-home .home-people--single .home-people__item { grid-template-columns: 1fr; } html[data-style="minimal"] .page-home .home-people__meta { display: contents; color: var(--min-muted); } html[data-style="minimal"] .page-home .home-people__current { grid-column: 1; grid-row: 2; width: auto; color: var(--min-muted); text-align: left; } html[data-style="minimal"] .page-home .home-people__current-label { color: var(--min-link); } html[data-style="minimal"] .page-home .home-people__years { grid-column: 2; grid-row: 1; width: auto; color: var(--min-muted); text-align: right; white-space: nowrap; } /* Collapse the people columns on narrow screens. */ @media (max-width: 640px) { html[data-style="minimal"] .page-home .home-card-grid { grid-template-columns: 1fr; gap: 1.5rem; } html[data-style="minimal"] .page-home .home-card-column { gap: 1.5rem; } /* The rich layout exposes long tooltip copy inline on small screens. Keep the minimal roster compact; the same copy remains on the name's title attribute for pointer and keyboard users. */ html[data-style="minimal"] .page-home .home-people__note--mobile { display: none !important; } } /* Interest pills (if re-enabled) -------------------------------------- */ html[data-style="minimal"] .page-home .home-interest { padding: 0; background: none; color: var(--min-fg); } html[data-style="minimal"] .page-home .home-interest-grid { gap: 0.25rem 1.25rem; } /* Back-to-top: quiet outline instead of glass ------------------------- */ html[data-style="minimal"] #back-to-top { background: var(--min-bg); border: 1px solid var(--min-rule); box-shadow: none; color: var(--min-fg); } /* Meta line under publications etc. ----------------------------------- */ html[data-style="minimal"] .meta { color: var(--min-muted); } /* Bio: center the reading measure within the wider page column so it shares an optical axis with the controls. */ html[data-style="minimal"] .page-home .home-hero-card #bio { margin: 0; padding: 0; } html[data-style="minimal"] .page-home .home-hero-card .bio-short, html[data-style="minimal"] .page-home .home-hero-card .bio-text { margin-inline: auto; } html[data-style="minimal"] .page-home .home-hero-card .bio-short, html[data-style="minimal"] .page-home .home-hero-card .bio-text { padding: 0; } /* Prose: default to ragged-right without awkward hyphenation, and keep a comfortable reading measure rather than sprawling wide lines. */ html[data-style="minimal"] p, html[data-style="minimal"] li { hyphens: none; } html[data-style="minimal"] .page-home .home-section__lede, html[data-style="minimal"] .page-home .home-facts p, html[data-style="minimal"] .page-home .home-facts li { max-width: 64ch; } html[data-style="minimal"] .page-home .home-hero-card p { max-width: none; text-align: left; text-wrap: wrap; font-kerning: normal; font-optical-sizing: auto; font-variant-ligatures: common-ligatures contextual; font-synthesis: none; font-size-adjust: from-font; hyphens: none; } /* Trim only the line-box slack at the outer edges; internal leading stays intact. Unsupported engines retain the conventional line box. */ @supports (text-box-trim: trim-both) and (text-box-edge: cap text) { html[data-style="minimal"] .page-home .home-hero-card p { text-box-trim: trim-both; text-box-edge: cap text; } } /* Optical punctuation is a progressive enhancement (currently most useful in Safari); it does not affect engines that lack support. */ @supports (hanging-punctuation: first allow-end last) { html[data-style="minimal"] .page-home .home-hero-card p { hanging-punctuation: first allow-end last; } } @media (max-width: 640px) { html[data-style="minimal"] .page-home .home-hero-card p { text-align: left; hyphens: none; } } /* ========================================================================= Standalone pages: flatten page-specific chrome so the minimal style is consistent site-wide, not just on the homepage. ========================================================================= */ /* ---- Shared: bio-style toggle buttons (Full bio / Third person / etc.) - */ html[data-style="minimal"] .bio-btn { background: none !important; border: 0 !important; border-radius: 0 !important; color: var(--min-muted) !important; box-shadow: none !important; } html[data-style="minimal"] .bio-btn + .bio-btn { border-left: 1px solid var(--min-rule) !important; } html[data-style="minimal"] .bio-btn:hover, html[data-style="minimal"] .bio-btn:focus-visible { background: none !important; color: var(--min-fg) !important; transform: none; } /* ---- Shared: publication action buttons (BibTeX / DOI / link / …) ----- */ /* Used on both the homepage highlights and the Publications page. */ html[data-style="minimal"] .btn-bib { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0.9rem 0 0 !important; color: var(--min-link) !important; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.14em; } html[data-style="minimal"] .btn-bib:hover, html[data-style="minimal"] .btn-bib:focus { background: none !important; border: 0 !important; color: var(--min-link-hover) !important; } /* ======================= Publications page ============================= */ /* Intro lede: quiet left-rule note instead of a glass card */ html[data-style="minimal"] .page-publications .publications-lede { padding: 0.15rem 0 0.15rem 1rem; border: 0; border-left: 3px solid var(--min-accent); border-radius: 0; background: none; box-shadow: none; } /* Topic filter chips -> plain toggle text */ html[data-style="minimal"] .page-publications .publications-theme, html[data-style="minimal"] .page-publications .publications-theme[data-theme-id] { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--min-muted) !important; font-weight: 600; text-decoration: none; } html[data-style="minimal"] .page-publications .publications-theme:hover:not(.is-active) { color: var(--min-fg) !important; text-decoration: underline; transform: none; } html[data-style="minimal"] .page-publications .publications-theme.is-active, html[data-style="minimal"] .page-publications .publications-theme.is-active[data-theme-id] { color: var(--min-fg) !important; background: none !important; box-shadow: none !important; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.12em; } html[data-style="minimal"] .page-publications .publications-themes { gap: 0.35rem 1.1rem; } /* Per-entry topic tags -> small muted labels, no pill, no dot */ html[data-style="minimal"] .publication-theme-tag, html[data-style="minimal"] .publication-theme-tag--law, html[data-style="minimal"] .publication-theme-tag--crypto, html[data-style="minimal"] .publication-theme-tag--security { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--min-muted) !important; font-size: 0.8125rem; } html[data-style="minimal"] .publication-theme-tag::before { display: none !important; } html[data-style="minimal"] .publication-theme-tags { margin-left: 0; gap: 0.35rem 0.9rem; } /* Year selector: hairline underline, no pill / gradient / glow */ html[data-style="minimal"] #publications .yearselector-control::before { display: none !important; } html[data-style="minimal"] #publications .yearselector-control::after { border-top-color: var(--min-muted); } html[data-style="minimal"] #publications select[data-yearselector] { appearance: none; -webkit-appearance: none; background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid var(--min-rule) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--min-fg) !important; padding: 0.2rem 1.9rem 0.2rem 0.1rem !important; } /* Section rules and per-entry accent bars -> hairline */ html[data-style="minimal"] .page-publications .publications-page h3::after { background: var(--min-rule) !important; } html[data-style="minimal"] .page-publications .publications-page ol.bibliography > li { border-left: 2px solid var(--min-rule) !important; } html[data-style="minimal"] .page-publications .publications-page ol.bibliography > li:hover, html[data-style="minimal"] .page-publications .publications-page ol.bibliography > li:focus-within { border-left-color: var(--min-muted) !important; } html[data-style="minimal"] .page-publications .bibliography pre { background: var(--min-rule) !important; border-radius: 0; } /* ======================= Teaching page ================================ */ /* Section-level nav pills -> plain underlined links */ html[data-style="minimal"] .page-teaching .teaching-nav-link { padding: 0; border: 0; border-radius: 0; background: none; text-decoration: underline; color: var(--min-link); } html[data-style="minimal"] .page-teaching .teaching-nav-link:hover, html[data-style="minimal"] .page-teaching .teaching-nav-link:focus { background: none; border: 0; transform: none; color: var(--min-link-hover); } /* Collapsible course groups: no card, hairline divider */ html[data-style="minimal"] .page-teaching .teaching-collapse { padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; } html[data-style="minimal"] .page-teaching .teaching-collapse + .teaching-collapse { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--min-rule); } html[data-style="minimal"] .page-teaching .teaching-summary-count, html[data-style="minimal"] .page-teaching .teaching-summary::after { color: var(--min-muted); } /* Course cards -> single-column list, no chrome */ html[data-style="minimal"] .page-teaching .teaching-grid { display: block; } html[data-style="minimal"] .page-teaching .teaching-card { display: block; padding: 0; margin-bottom: 1.1rem; min-height: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; } html[data-style="minimal"] .page-teaching .teaching-code { padding: 0; background: none !important; color: var(--min-muted) !important; } html[data-style="minimal"] .page-teaching .teaching-institution, html[data-style="minimal"] .page-teaching .section-blurb, html[data-style="minimal"] .page-teaching .teaching-subheading { color: var(--min-muted); } html[data-style="minimal"] .page-teaching .teaching-term { padding: 0; background: none !important; color: var(--min-muted) !important; } html[data-style="minimal"] .page-teaching .teaching-terms { gap: 0.35rem 0.9rem; } /* ======================= Safe & Sound page ============================ */ html[data-style="minimal"] .page-safe-and-sound .safe-and-sound-decra-note { border: 0; border-left: 3px solid var(--min-accent); border-radius: 0; background: none; padding: 0.15rem 0 0.15rem 1rem; } html[data-style="minimal"] .page-safe-and-sound .safe-and-sound-collapse { border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; border-top: 1px solid var(--min-rule) !important; padding-left: 0; padding-right: 0; } html[data-style="minimal"] .page-safe-and-sound .safe-and-sound-hero__figure { border: 1px solid var(--min-rule); border-radius: 0; box-shadow: none; } html[data-style="minimal"] .page-safe-and-sound .safe-and-sound-hero__figure::after { display: none; } #content [data-keyboard-item] { scroll-margin-top: 1.25rem; } #content [data-keyboard-item]:focus-visible { outline: 2px solid var(--accent-45); outline-offset: 4px; } .header-credentials { margin: 0.3rem 0 0.25rem; font-variant-caps: small-caps; font-size: 1.4rem; font-weight: 400; } .header-email { margin: 0.3rem 0 0.6rem; font-size: 1.25rem; font-weight: 300; color: var(--color-muted); } @media (max-width: 640px) { #header { position: relative; display: block; text-align: left; } #heading { width: 100%; } .header-name-row { padding-right: 80px; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } #name { flex-basis: 100%; } #heading h1 { font-size: clamp(1.5rem, 6.6vw, 2rem); } .header-name-row .mb-2 { margin-bottom: 0 !important; } .header-name-row .ms-1 { margin-left: 0 !important; } #headshot { position: absolute; top: 0; right: 0; margin: 0; } #headshot img { width: 64px !important; height: 64px !important; } .header-credentials { font-size: 1rem; } .header-email { font-size: 1rem; margin-bottom: 0.4rem; } #main-nav { max-width: none !important; } #main-nav .nav-link { white-space: nowrap; } } /*# sourceMappingURL=page.css.map */