@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #061525;
    --panel: #0a2034;
    --ink: #f1f5fa;
    --muted: #b4c7d9;
    --blue: #b8dfff;
    --line: #aecfe32b;
    --serif: 'Instrument Serif', Georgia, serif;
    --sans: 'DM Sans', Arial, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.7 var(--sans);
    -webkit-font-smoothing: antialiased
}

body.work-page,
body.about-page {
    background: #2b203d
}

body.work-page .page-shell,
body.about-page .page-shell {
    background: radial-gradient(ellipse at 90% 0%, #ed9ec970, transparent 46%), radial-gradient(ellipse at 10% 42%, #a993dd3d, transparent 43%), #2b203d
}

.about-teaching-wrap { padding-top: 96px; padding-bottom: 90px }
.teaching-page-intro { max-width: 760px; margin-bottom: 56px }
.teaching-page-intro h1 { margin: 0 0 18px; font: clamp(46px, 6vw, 76px)/1.04 var(--serif); letter-spacing: -.045em }
.teaching-page-intro > p:last-child { max-width: 640px; margin: 0; color: #c2d9e9; font-size: 19px; line-height: 1.75 }
.teaching-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 38px; align-items: stretch; padding: 30px; border: 1px solid #f3bfdf60; border-radius: 22px; background: linear-gradient(135deg, #4b315d, #2c213f) }
.teaching-feature h2, .press-section h2 { margin: 0 0 16px; font: clamp(30px, 3.7vw, 47px)/1.08 var(--serif); letter-spacing: -.04em }
.teaching-feature-copy > p:not(.eyebrow) { max-width: 670px; margin: 0 0 22px; color: #c3d9e8; line-height: 1.85 }
.teaching-photo-slot { display: grid; min-height: 270px; place-items: center; border: 1px dashed #f0bde070; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #d995c348, transparent 56%), #2c213f; color: #f0cce2; font-size: 13px; letter-spacing: .1em; text-transform: uppercase }
.teaching-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 }
.teaching-impact article { padding: 27px 20px; border: 1px solid #9fd7fc35; border-radius: 15px; background: #153952a3; text-align: center }
.teaching-impact strong { display: block; color: #e5f7ff; font-size: clamp(35px, 4vw, 56px); line-height: 1; letter-spacing: -.06em }
.teaching-impact span { display: block; margin-top: 9px; color: #b9d8e9; font-size: 12px; letter-spacing: .08em; text-transform: uppercase }
.teaching-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 96px }
.teaching-gallery .teaching-photo-slot { min-height: 220px }
.press-section { width: min(460px, 100%); margin-left: auto; padding-top: 45px; border-top: 1px solid #f2b9df45 }
.press-section header { max-width: 650px; margin-bottom: 28px }
.news-container { display: grid; gap: 9px }
.news-item { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 18px; padding: 15px 17px; border: 1px solid #edb8df4f; border-radius: 8px; background: #5d3d6b73 }
.news-item time { color: #f0bcdf; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase }
.news-meta { display:grid; align-content:start; gap:9px }
.news-meta img { width:54px; height:34px; object-fit:contain; object-position:left center; mix-blend-mode:multiply }
.news-meta img.news-wide-logo { width:82px }
.news-item h3 { margin: 0 0 4px; color: #fff0f8; font-size: 16px; line-height: 1.3 }
.news-item p { margin: 4px 0 0; color: #dfcde0; font-size: 13px; line-height: 1.5 }
.news-item a { color: #f6c4e3; font-weight: 700; text-decoration: none }
.news-item a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px }
@media (max-width: 760px) { .about-teaching-wrap { padding-top: 56px; padding-bottom: 58px }.teaching-feature { grid-template-columns: 1fr; padding: 22px }.teaching-impact, .teaching-gallery { grid-template-columns: 1fr }.teaching-photo-slot { min-height: 220px }.teaching-gallery { margin-bottom: 62px }.press-section { margin-left: 0 }.news-item { grid-template-columns: 1fr; gap: 5px } }

/* Light sky treatment for every page beyond the home page. */
body:not(.home-page) { --bg:#e0f4fb; --panel:#ffffff; --ink:#243949; --muted:#587083; --blue:#705185; --line:#7899aa42; background:#e0f4fb; color:#243949 }
body:not(.home-page) .page-shell { background:radial-gradient(ellipse at 4% 96%,#163b6d92 0%,transparent 42%),radial-gradient(circle at 95% 8%,#ffb58c85 0%,transparent 35%),radial-gradient(ellipse at 92% 69%,#c58cd879 0%,transparent 42%),radial-gradient(circle at 8% 34%,#78c8ee82 0%,transparent 39%),linear-gradient(135deg,#bfe5f5 0%,#eaf6fa 43%,#f3dcef 100%) }
body:not(.home-page) .site-header { border-bottom-color:#8fb2ce70; background:linear-gradient(90deg,#061525,#123f68) }
body:not(.home-page) .site-header .nav a,body:not(.home-page) .menu-toggle { color:#edf8ff }
body:not(.home-page) .footer { background:#dceff5; border-top-color:#b4d5df }
body:not(.home-page) .footer-bottom { border-top-color:#b4d5df }
body.about-page .press-section { border-top-color:#b6d3dc }
body.about-page .news-item { border-color:#b8d5de; background:#ffffffcf; box-shadow:0 8px 22px #5c859112 }
body.about-page .news-item time,body.about-page .news-item a { color:#765487 }
body.about-page .news-item h3 { color:#263c4c }
body.about-page .news-item p { color:#587083 }
body:not(.home-page) .detail-summary,body:not(.home-page) .caption,body:not(.home-page) .prose p { color:#587083 }
body:not(.home-page) .project-meta,body:not(.home-page) .aside { border-color:#b8d5de; background:#ffffffbd }
body:not(.home-page) .project-meta div,body:not(.home-page) .aside .text-link,body:not(.home-page) .tags span { border-color:#b8d5de }
body:not(.home-page) .holographic-icon.email { color:#9a4f79 }
body:not(.home-page) .holographic-icon.github { color:#496f91 }
body:not(.home-page) .holographic-icon.linkedin { color:#337398 }
body:not(.home-page) .holographic-icon.x { color:#5d5788 }
body:not(.home-page) .holographic-icon:hover,body:not(.home-page) .holographic-icon:focus-visible { color:#243949 }
body.gallery-page .footer { isolation:auto; }
body.gallery-page .footer .wrap { z-index:5; }

/* Shared, light floral footer for every current site page. */
.footer { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(180deg,#eaf8fbb8 0%,#f4fbf8c7 100%),url('/assets/moon-garden.png') center 88%/cover no-repeat !important; border-top-color:#b4d5df !important; }
.footer .wrap { position:relative; z-index:1; }
.footer-bottom { color:#40596a; border-top-color:#b4d5df !important; }
.footer .holographic-icon.email { color:#9a4f79; }
.footer .holographic-icon.github { color:#496f91; }
.footer .holographic-icon.linkedin { color:#337398; }
.footer .holographic-icon.x { color:#5d5788; }
/* A deeper flower garden gives the social area a calmer finish. */
.footer { background:linear-gradient(180deg,#0b2946ba 0%,#071d35ce 100%),url('/assets/moon-garden.png') center 88%/cover no-repeat !important; border-top-color:#799db685 !important; }
.footer-bottom { color:#d8edf7; border-top-color:#86a9bd70 !important; }
body:not(.home-page) .footer .holographic-icon.email { color:#bce9ff; }
body:not(.home-page) .footer .holographic-icon.github { color:#bcb5ff; }
body:not(.home-page) .footer .holographic-icon.linkedin { color:#86c9ff; }
body:not(.home-page) .footer .holographic-icon.x { color:#d7efff; }
body.home-page .footer .holographic-icon.email { color:#bce9ff; }
body.home-page .footer .holographic-icon.github { color:#bcb5ff; }
body.home-page .footer .holographic-icon.linkedin { color:#86c9ff; }
body.home-page .footer .holographic-icon.x { color:#d7efff; }
body .footer .footer-bottom { color:#f4fbff !important; }
body.gallery-page .footer { z-index:6; }

/* A softened version of the home garden carries through the social footers. */
body.about-page .footer,body.work-page .footer,body.gallery-page .footer { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(180deg,#eaf8fbd9 0%,#e8f5f8e8 100%),url('/assets/moon-garden.png') center 88%/cover no-repeat; border-top-color:#b4d5df; }
body.about-page .footer .wrap,body.work-page .footer .wrap,body.gallery-page .footer .wrap { position:relative; z-index:1; }
body.about-page .footer-bottom,body.work-page .footer-bottom,body.gallery-page .footer-bottom { color:#40596a; border-top-color:#b4d5df; }
body.gallery-page .footer .socials a { color:#40596a; font-weight:700; }

/* Gallery: a varied, framed collage that keeps every artwork intact. */
body.gallery-page .art-gallery { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-flow:row dense; gap:22px; }
body.gallery-page .art-piece { display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:350px; min-width:0; margin:0; padding:0; overflow:hidden; border:1px solid #8fb7c2; border-radius:3px; background:transparent; box-shadow:0 12px 25px #486f8324,0 2px 5px #486f8318; transform-origin:center; transition:transform 900ms cubic-bezier(.22,1,.36,1),box-shadow 900ms ease; }
body.gallery-page .art-piece img { width:100%; height:100%; min-height:0; object-fit:contain; background:transparent; transition:transform .35s ease; }
body.gallery-page .art-piece:hover { position:relative; z-index:3; transform:scale(1.16); box-shadow:0 28px 48px #486f8366,0 7px 14px #486f8340; }
body.gallery-page .art-piece:hover img { transform:none; }
body.gallery-page .art-piece figcaption { position:static; padding:9px 8px; border-radius:0; background:#dff0f5; color:#40596a; font-size:11px; line-height:1.25; text-align:center; }
body.gallery-page .art-piece:nth-child(n) { grid-column:span 2; grid-row:auto; }
body.gallery-page .art-piece.art-piece-wide { display:block; grid-column:span 3 !important; min-height:0; }
body.gallery-page .art-piece.art-piece-wide img { height:auto; object-fit:contain; }
@media(max-width:800px) { body.gallery-page .art-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:14px; } body.gallery-page .art-piece,body.gallery-page .art-piece:nth-child(n),body.gallery-page .art-piece.art-piece-wide { display:block; grid-column:span 1 !important; grid-row:auto; padding:8px; } body.gallery-page .art-piece img { height:auto; } body.gallery-page .art-piece figcaption { padding-top:7px; } }

/* Keep the About logo wall wide; this must follow the legacy layout rules above. */
@media(min-width:700px) {
    .about-teaching-wrap { grid-template-columns:minmax(0,1fr) 230px; gap:20px; }
    body.about-page .featured-section { grid-column:1; grid-row:1; }
    body.about-page .press-section { grid-column:2; grid-row:1; width:100%; max-width:230px; justify-self:end; align-self:start; }
    body.about-page .art-section { grid-column:1 / -1; grid-row:2; }
}

/* About: let press coverage lead as a compact, auto-scrolling strip. */
body.about-page .press-section { grid-column:1 / -1; grid-row:1; width:100%; max-width:none; margin:0; padding-top:0; }
body.about-page .featured-section { grid-column:1 / -1; grid-row:2; }
body.about-page .art-section { grid-column:1 / -1; grid-row:3; }
body.about-page .press-section header { display:flex; align-items:baseline; gap:12px; max-width:none; margin:0 0 12px; }
body.about-page .press-section header .eyebrow { margin:0; white-space:nowrap; }
body.about-page .press-section header h2 { margin:0; font-size:clamp(22px,2.4vw,31px); }
body.about-page .news-container { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,320px); grid-template-columns:none; gap:12px; padding:2px 2px 14px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:#9fbcc7 #ffffff80; }
body.about-page .news-item { min-height:116px; grid-template-columns:1fr; gap:5px; padding:14px 16px; }
body.about-page .news-meta { display:block; }
body.about-page .news-item h3 { margin:0; font-size:14px; line-height:1.3; }
body.about-page .news-item p { margin:4px 0 0; font-size:11px; line-height:1.35; }
body.about-page .news-item p:last-child { display:none; }
@media(max-width:640px) { body.about-page .press-section header { display:block; } body.about-page .press-section header .eyebrow { margin-bottom:7px; } body.about-page .news-container { grid-auto-columns:minmax(245px,82vw); } }

/* A simple publication-style wall of marks rather than individual logo cards. */
body.about-page .featured-section { grid-column:1 / -1; margin:0; padding:46px clamp(20px,4vw,58px) 42px }
body.about-page .featured-section header { max-width:none; margin:0 0 30px; text-align:center }
body.about-page .featured-section h2 { color:#3d1d32; font:clamp(32px,4.3vw,51px)/1 var(--serif); letter-spacing:-.05em }
body.about-page .recognition-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px 20px }
body.about-page .recognition-logos > div { display:grid; width:160px; height:104px; min-height:0; place-items:center; padding:0; border:0; border-radius:0; background:none; box-shadow:none; order:3 }
body.about-page .recognition-logos > div:nth-child(1), body.about-page .recognition-logos > div:nth-child(2), body.about-page .recognition-logos > div:nth-child(3), body.about-page .recognition-logos > div:nth-child(4), body.about-page .recognition-logos > div:nth-child(16) { width:195px; height:118px; order:1 }
body.about-page .recognition-logos > div:nth-child(5), body.about-page .recognition-logos > div:nth-child(6), body.about-page .recognition-logos > div:nth-child(7), body.about-page .recognition-logos > div:nth-child(8), body.about-page .recognition-logos > div:nth-child(9), body.about-page .recognition-logos > div:nth-child(15) { order:2 }
body.about-page .recognition-logos > div:nth-child(1) img { width:150px; height:132px }
body.about-page .recognition-logos > div:nth-child(2) img { width:150px; height:132px }
body.about-page .recognition-logos > div:nth-child(3) img { width:150px; height:132px }
body.about-page .recognition-logos > div:nth-child(4) img { width:215px; height:118px }
body.about-page .recognition-logos > div:nth-child(16) img { width:150px; height:132px }
body.about-page .recognition-logos > div:nth-child(10), body.about-page .recognition-logos > div:nth-child(14) { width:130px }
body.about-page .recognition-logos > div:nth-child(10) img, body.about-page .recognition-logos > div:nth-child(14) img { width:100px; height:82px }
body.about-page .recognition-logos img { width:116px; height:104px; object-fit:contain; mix-blend-mode:multiply }
body.about-page .recognition-logos img.logo-wide { width:190px; height:92px }
body.about-page .recognition-logos img.logo-featured { width:136px; height:112px }
body.about-page .recognition-logos img.logo-wide.logo-featured { width:195px; height:104px }
body.about-page .recognition-logos span { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
body.about-page .press-section { grid-column:2; }
@media(max-width:900px) { body.about-page .press-section { grid-column:auto } }
@media(max-width:520px) { body.about-page .featured-section { padding:36px 16px 32px } body.about-page .recognition-logos { gap:22px 16px } body.about-page .recognition-logos > div { width:148px; height:86px } body.about-page .recognition-logos img { width:88px; height:76px } body.about-page .recognition-logos img.logo-wide { width:144px; height:64px } body.about-page .recognition-logos img.logo-featured { width:106px; height:82px } body.about-page .recognition-logos img.logo-wide.logo-featured { width:144px; height:74px } }

/* A small, personal art wall balances the recognition and press on About. */
body.about-page .art-section { grid-column:1 / -1; padding-top:45px; border-top:1px solid #b6d3dc; }
body.about-page .art-section header { max-width:620px; margin-bottom:25px; }
body.about-page .art-section h2 { margin:0 0 11px; color:#263c4c; font:clamp(30px,3.7vw,47px)/1.08 var(--serif); letter-spacing:-.04em; }
body.about-page .art-section header > p:last-child { margin:0; color:#587083; line-height:1.7; }
.art-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.art-piece { position:relative; min-width:0; margin:0; overflow:hidden; border:1px solid #b8d5de; border-radius:15px; background:#fff; box-shadow:0 8px 22px #5c85911a; }
.art-piece img { display:block; width:100%; height:235px; object-fit:cover; transition:transform .35s ease; }
.art-piece-featured { grid-row:span 2; }
.art-piece-featured img { height:100%; min-height:484px; object-position:center; }
.art-piece figcaption { position:absolute; right:10px; bottom:10px; padding:5px 8px; border-radius:999px; background:#fffdf8dc; color:#40596a; font-size:11px; font-weight:700; letter-spacing:.04em; }
.art-piece:hover img { transform:scale(1.035); }
@media(max-width:900px) { .art-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:640px) { .art-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.art-piece img { height:190px; }.art-piece-featured img { min-height:390px; } }

/* Let the press coverage follow the recognition wall as a browsable horizontal rail. */
body.about-page .featured-section { grid-row:1; }
body.about-page .press-section { grid-column:1 / -1; grid-row:2; width:auto; margin:0; padding-top:45px; }
body.about-page .art-section { grid-row:3; }
body.about-page .press-section header { max-width:650px; }
body.about-page .news-container { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(290px,360px); grid-template-columns:none; gap:14px; padding:2px 2px 16px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:#9fbcc7 #ffffff80; }
body.about-page .news-item { min-height:150px; grid-template-columns:1fr; gap:7px; padding:19px; scroll-snap-align:start; }
body.about-page .news-meta { display:block; }
body.about-page .news-item time { font-size:11px; }
@media(max-width:640px) { body.about-page .news-container { grid-auto-columns:minmax(260px,84vw); } }

/* Desktop About layout: recognition at left, a compact press sidebar at right. */
@media(min-width:700px) {
    .about-teaching-wrap { grid-template-columns:minmax(0,1fr) 230px; gap:20px; }
    body.about-page .featured-section { grid-column:1; grid-row:1; }
    body.about-page .press-section { grid-column:2; grid-row:1; width:100%; max-width:230px; justify-self:end; align-self:start; }
    body.about-page .art-section { grid-column:1 / -1; grid-row:2; }
    body.about-page .news-container { display:grid; grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; gap:6px; padding:0; overflow:visible; }
    body.about-page .news-item { min-height:0; padding:10px 12px; gap:4px; }
    body.about-page .news-item h3 { margin:0; font-size:13px; line-height:1.25; }
    body.about-page .news-item p { margin:3px 0 0; overflow:hidden; color:#765487; font-size:10px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
    body.about-page .news-item p:last-child { display:none; }
    body.about-page .news-item a { font-size:10px; }
}

/* Dedicated art gallery. */
.gallery-shell { padding-top:82px; padding-bottom:90px; }
.gallery-intro { max-width:690px; margin-bottom:42px; }
.gallery-intro h1 { margin:0 0 14px; color:#263c4c; font:clamp(48px,6vw,76px)/1.02 var(--serif); letter-spacing:-.05em; }
.gallery-intro > p:last-child { margin:0; color:#587083; font-size:18px; line-height:1.7; }
.gallery-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; width:min(850px,100%); margin:30px 0 0; padding:0; }
.gallery-stats div { min-width:0; }
.gallery-stats dt { color:#9a4f79; font:clamp(42px,5vw,62px)/.9 var(--serif); letter-spacing:-.06em; }
.gallery-stats dd { margin:11px 0 0; color:#40596a; font-size:13px; font-weight:700; line-height:1.3; }
.gallery-moments { margin:0 0 70px; }
.gallery-moments header { margin:0 0 21px; }
.gallery-moments header .eyebrow { margin-bottom:6px; font-size:10px; }
.gallery-moments h2 { margin:0; color:#263c4c; font:clamp(30px,3.6vw,43px)/1 var(--serif); letter-spacing:-.05em; }
.photo-carousel { display:grid; width:min(1020px,100%); grid-template-columns:42px minmax(0,1fr) 42px; align-items:center; margin:auto; }
.photo-viewport { overflow:hidden; }
.photo-track { display:flex; transition:transform 700ms cubic-bezier(.22,1,.36,1); }
.photo-track figure { display:flex; height:450px; flex:0 0 calc(100% / 3); align-items:center; justify-content:center; min-width:0; margin:0; }
.photo-track img { width:auto; max-width:100%; height:440px; filter:drop-shadow(0 10px 15px #345b6936); object-fit:contain; }
.photo-arrow { z-index:1; display:grid; width:42px; height:60px; place-items:center; border:0; background:transparent; color:#345b69; font:48px/.8 var(--serif); cursor:pointer; opacity:.75; transition:opacity .25s ease,transform .25s ease; }
.photo-arrow:hover,.photo-arrow:focus-visible { opacity:1; transform:scale(1.12); }
.photo-arrow-prev { grid-column:1; }
.photo-arrow-next { grid-column:3; }
.photo-count { grid-column:2; margin:8px 0 0; color:#40596a; font-size:10px; font-weight:700; letter-spacing:.1em; text-align:center; }
body.gallery-page .page-shell { position:relative; isolation:auto; }
body.gallery-page .gallery-shell { position:relative; z-index:5; }
.gallery-ambient { position:fixed; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.gallery-ambient span { position:absolute; inset:-120px; filter:saturate(1.4) brightness(1.13) blur(78px); transform:translateY(-108%); transition:transform 2100ms cubic-bezier(.22,1,.36,1); will-change:transform; }
.gallery-ambient span { background:linear-gradient(180deg,var(--gallery-tone-strong,#70cce8fa) 0%,var(--gallery-tone-mid,#bde5efe8) 54%,var(--gallery-tone-soft,#bde5ef9b) 100%); }
body.gallery-page[data-gallery-previous="1"] .gallery-ambient span:nth-child(1),body.gallery-page[data-gallery-previous="2"] .gallery-ambient span:nth-child(2),body.gallery-page[data-gallery-previous="3"] .gallery-ambient span:nth-child(3),body.gallery-page[data-gallery-previous="4"] .gallery-ambient span:nth-child(4) { z-index:1; transform:translateY(0); }
body.gallery-page[data-gallery-tone="1"] .gallery-ambient span:nth-child(1),body.gallery-page[data-gallery-tone="2"] .gallery-ambient span:nth-child(2),body.gallery-page[data-gallery-tone="3"] .gallery-ambient span:nth-child(3),body.gallery-page[data-gallery-tone="4"] .gallery-ambient span:nth-child(4) { z-index:2; transform:translateY(0); }
@media(prefers-reduced-motion:reduce) { .gallery-stats dt,.gallery-ambient span { transition:none; } }
@media(max-width:640px) { .gallery-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; margin-top:25px; }.gallery-stats dt { font-size:45px; }.gallery-stats dd { margin-top:8px; font-size:12px; }.gallery-moments { margin-bottom:48px; }.photo-carousel { grid-template-columns:38px minmax(0,1fr) 38px; }.photo-track figure { height:300px; flex-basis:100%; }.photo-track img { max-width:100%; height:285px; }.photo-arrow { width:38px; height:54px; font-size:43px; } }
body.gallery-page .art-section { padding-top:0; border:0; }
body.gallery-page .art-section header { display:none; }
@media(max-width:640px) { .gallery-shell { padding-top:55px; padding-bottom:60px; }.gallery-intro { margin-bottom:30px; }.gallery-intro > p:last-child { font-size:16px; } }

/* Recognition marks pair with the compact press column on About. */
.about-teaching-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,460px); gap:64px; align-items:start }
.featured-section { padding-top:45px; border-top:1px solid #b6d3dc }
.featured-section header { max-width:520px; margin-bottom:28px }
.featured-section h2 { margin:0; color:#263c4c; font:clamp(30px,3.7vw,47px)/1.08 var(--serif); letter-spacing:-.04em }
.recognition-logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.recognition-logos > div { display:grid; min-height:128px; place-items:center; align-content:center; gap:10px; padding:15px 10px; border:1px solid #b8d5de; border-radius:12px; background:#ffffffc9; box-shadow:0 8px 20px #486f8310; text-align:center }
.recognition-logos img { width:58px; height:58px; object-fit:contain; image-rendering:auto; mix-blend-mode:multiply }
.recognition-logos img.logo-wide { width:100px; height:48px }
.recognition-logos span { color:#425c6d; font-size:10px; font-weight:700; line-height:1.25; letter-spacing:.045em; text-transform:uppercase }
@media(max-width:900px) { .about-teaching-wrap { grid-template-columns:1fr; gap:50px }.press-section { margin-left:0 }.recognition-logos { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(max-width:480px) { .recognition-logos { grid-template-columns:repeat(2,minmax(0,1fr)) } }
/* The brand already links home, so the matching nav item is redundant. */
.brand { display:none }

a {
    color: inherit;
    text-underline-offset: 5px
}

a:hover {
    color: var(--blue)
}

button {
    font: inherit
}

img {
    display: block;
    max-width: 100%
}

::selection {
    background: #b8dfff;
    color: #071629
}

.wrap {
    width: min(1180px, calc(100% - 96px));
    margin: auto
}

.skip {
    position: fixed;
    top: -90px;
    left: 20px;
    z-index: 100;
    background: var(--ink);
    color: var(--bg);
    padding: 12px
}

.skip:focus {
    top: 10px
}

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 6px
}

.site-header {
    height: 90px;
    position: relative;
    z-index: 20;
    border-bottom: 1px solid #ffffff0b
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%
}

.brand {
    text-decoration: none;
    font: 32px var(--serif);
    letter-spacing: -1px
}

.brand span {
    font: 19px var(--serif);
    color: var(--blue);
    padding-left: 9px
}

.nav {
    display: flex;
    gap: 36px;
    align-items: center
}

.nav a {
    font-size: 15px;
    text-decoration: none;
    position: relative;
    padding: 14px 0
}

.nav a[aria-current=page]:after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--blue);
    box-shadow: 0 0 8px #a8d9ff
}

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 5px;
    padding: 7px 13px
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: 12px;
    font-weight: 500;
    color: var(--blue);
    margin: 0 0 20px
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: 640px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    margin-top: -90px;
    padding-top: 90px
}

.hero:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(90deg, #061525cc 0%, #06152580 38%, transparent 65%), url('/assets/moon-garden.png') center 42%/cover no-repeat
}

.hero:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, var(--bg), transparent 23%)
}

.hero-inner {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center
}

.hero-copy {
    position: relative;
    z-index: 3;
    width: 55%;
    padding: 64px 0 105px
}

.hero h1 {
    font: clamp(65px, 7.5vw, 104px)/1 var(--serif);
    letter-spacing: -.035em;
    margin: 10px 0 22px
}

.hero h1 span {
    font-size: 35px;
    color: var(--blue);
    vertical-align: top;
    display: inline-block;
    margin-top: 16px;
    margin-left: 8px
}

.hero h2 {
    font: clamp(30px, 3.1vw, 44px)/1.14 var(--serif);
    font-weight: 400;
    max-width: 480px;
    margin: 0 0 23px
}

.hero-copy>p:not(.eyebrow) {
    max-width: 430px;
    color: #c7d7e4;
    font-size: 16px;
    line-height: 1.8
}

.portrait {
    position: absolute;
    right: -65px;
    width: 60%;
    height: 650px;
    object-fit: cover;
    object-position: center 22%;
    z-index: 1;
    top: 50%;
    mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 22%, #000 92%, transparent 100%)
}

.portrait-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%)
}


.actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 30px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border: 1px solid #9fcae7;
    border-radius: 40px;
    padding: 11px 24px;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s, transform .2s
}

.button:hover {
    background: #b8dfff16;
    transform: translateY(-2px)
}

.button.primary {
    background: #c5e6ff;
    color: #092036;
    border-color: #d4edff;
    box-shadow: 0 0 24px #8ec6ff25
}

.button.primary:hover {
    background: #e4f4ff
}

.hero-note {
    position: absolute;
    bottom: 29px;
    left: 0;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase
}

.section {
    padding: 76px 0
}

.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px
}

.section-heading h2 {
    font: 44px/1.1 var(--serif);
    margin: 0;
    letter-spacing: -.02em
}

.section-heading>a {
    font-size: 14px;
    color: var(--muted)
}

.section-heading:after {
    content: '';
    height: 1px;
    background: var(--line);
    flex: 1;
    order: 0
}

.section-heading>a {
    order: 1
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.project-card {
    border: 1px solid #7c9ebc65;
    border-radius: 9px;
    overflow: hidden;
    background: linear-gradient(135deg, #142b4155, #071b2e);
    transition: transform .25s, border-color .25s
}

.project-card:hover {
    transform: translateY(-5px);
    border-color: #c0e4ff
}

.card-image {
    height: 210px;
    width: 100%;
    object-fit: cover;
    background: #14283b;
    border-bottom: 1px solid var(--line)
}

.card-image.contain {
    object-fit: contain;
    background: #e8edf0
}

.card-body {
    padding: 23px 24px 25px
}

.card-body .eyebrow {
    font-size: 11px;
    letter-spacing: .13em;
    margin-bottom: 8px
}

.card-body h3 {
    font: 28px/1.12 var(--serif);
    margin: 0 0 12px
}

.card-body h3 a {
    text-decoration: none
}

.card-body p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 22px
}

.text-link {
    font-size: 14px;
    color: var(--blue)
}

.milestones {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 22px;
    border: 1px solid #91b5d04d;
    border-radius: 8px;
    padding: 24px 28px;
    margin-top: 40px;
    background: #12283e44
}

.milestones .label {
    font: 25px var(--serif);
    white-space: nowrap
}

.milestones p {
    margin: 0;
    font-size: 14px;
    color: #d1deeb
}

.milestones p+p {
    border-left: 1px solid var(--line);
    padding-left: 28px
}

.spark {
    color: #cceaff;
    margin-right: 12px
}

.home-about {
    padding: 75px 0 95px;
    position: relative;
    background: linear-gradient(90deg, #061525 20%, #06152599), url('/assets/moon-garden.png') right 80%/cover
}

.home-about .content {
    max-width: 620px
}

.home-about h2 {
    font: 54px/1.1 var(--serif);
    margin: 0 0 24px
}

.home-about p:not(.eyebrow) {
    color: var(--muted);
    max-width: 530px
}

.footer {
    border-top: 1px solid var(--line);
    background: linear-gradient(#061525a8, #061525bb), url('/assets/moon-garden.png') center 90%/cover;
    text-align: center;
    padding: 65px 0 22px
}

.footer h2 {
    font: 40px/1.1 var(--serif);
    margin: 0 0 28px
}

.socials {
    display: flex;
    justify-content: center;
    gap: 32px
}

.socials a {
    font-size: 14px;
    text-decoration: none;
    color: #c6dff2
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 58px;
    font-size: 12px;
    letter-spacing: .06em;
    color: #9bafc1
}

.page-intro {
    padding: 78px 0 55px;
    max-width: 850px
}

.page-intro h1 {
    font: clamp(54px, 6vw, 78px)/1.05 var(--serif);
    letter-spacing: -.03em;
    margin: 0 0 23px
}

.page-intro .lead {
    font-size: 19px;
    color: var(--muted);
    max-width: 710px;
    line-height: 1.7
}

.page-shell {
    background: radial-gradient(ellipse at 90% 0%, #17395466, transparent 40%)
}

.work-feature {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 55px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 55px
}

.work-feature img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    background: #dde5ed
}

.work-feature h2 {
    font: 46px/1.06 var(--serif);
    margin: 0 0 20px
}

.work-feature p {
    color: var(--muted)
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 24px 0
}

.tags span {
    font-size: 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 3px 11px;
    color: #c3d9e8
}

.work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.work-grid .card-image {
    height: 260px
}

.archive {
    border-top: 1px solid var(--line);
    margin: 70px 0 80px;
    padding-top: 40px
}

.archive h2 {
    font: 40px var(--serif);
    margin: 0 0 25px
}

.archive-row {
    display: grid;
    grid-template-columns: 75px 1fr auto;
    gap: 25px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline
}

.archive-row h3 {
    font: 24px var(--serif);
    margin: 0 0 7px
}

.archive-row p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
    max-width: 700px
}

.archive-row .year {
    font-size: 13px;
    color: #9eb5c9
}

.archive-row>a {
    font-size: 14px;
    color: var(--blue)
}

.detail-top {
    padding-top: 45px
}

.back-link {
    font-size: 14px;
    color: var(--muted)
}

.detail-title {
    font: clamp(46px, 6vw, 76px)/1.06 var(--serif);
    max-width: 1000px;
    margin: 22px 0
}

.detail-summary {
    max-width: 790px;
    font-size: 20px;
    color: var(--muted);
    line-height: 1.65
}

.project-meta {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    margin: 38px 0;
    padding: 22px 0;
    border-block: 1px solid var(--line)
}

.project-meta div {
    font-size: 14px
}

.project-meta span {
    display: block;
    font-size: 11px;
    color: #9eb5c9;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 6px
}

.detail-cover {
    width: 100%;
    max-height: 580px;
    object-fit: contain;
    background: #e4ebf1;
    border-radius: 8px;
    margin: 35px 0 15px
}

.caption {
    color: #91a8bc;
    font-size: 12px;
    margin: 10px 0
}

.detail-columns {
    display: grid;
    grid-template-columns: 1fr 270px;
    gap: 80px;
    padding: 45px 0 80px
}

.prose h2 {
    font: 36px/1.2 var(--serif);
    margin: 40px 0 18px
}

.prose h2:first-child {
    margin-top: 0
}

.prose p,
.prose li {
    color: #bdcedc;
    line-height: 1.9
}

.prose ul {
    padding-left: 20px
}

.aside {
    align-self: start;
    position: sticky;
    top: 25px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
    background: #10273b55
}

.aside h2 {
    font: 27px var(--serif);
    margin: 0 0 19px
}

.aside a {
    display: block;
    margin: 13px 0;
    font-size: 14px
}

.aside p {
    font-size: 13px;
    color: var(--muted)
}

.about-grid {
    display: grid;
    grid-template-columns: 1.25fr .7fr;
    gap: 75px;
    align-items: start;
    padding-bottom: 70px
}

.about-portrait {
    border-radius: 150px 150px 8px 8px;
    max-height: 520px;
    object-fit: cover;
    width: 100%;
    object-position: center 25%;
    border: 1px solid var(--line)
}

.about-grid h2 {
    font: 36px var(--serif);
    margin: 36px 0 13px
}

.about-grid p {
    color: var(--muted)
}

.small-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 0 0 80px
}

.small-sections>section {
    border-top: 1px solid var(--line);
    padding-top: 26px
}

.small-sections h2 {
    font: 32px var(--serif);
    margin: 0 0 18px
}

.small-sections p {
    color: var(--muted);
    font-size: 15px
}

.resume-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 60px;
    padding: 5px 0 85px
}

.resume-nav {
    position: sticky;
    top: 35px;
    align-self: start;
    display: grid;
    gap: 15px;
    font-size: 14px
}

.resume-nav a {
    color: var(--muted);
    text-decoration: none
}

.resume-section {
    margin-bottom: 52px
}

.resume-section h2 {
    font: 36px var(--serif);
    border-bottom: 1px solid var(--line);
    padding-bottom: 15px;
    margin-top: 0
}

.experience {
    padding: 10px 0 23px
}

.experience h3 {
    font: 26px var(--serif);
    margin: 0 0 5px
}

.experience .date {
    color: #90afc5;
    font-size: 13px
}

.experience p {
    color: var(--muted);
    margin: 10px 0;
    font-size: 15px
}

.honor-list {
    padding-left: 20px;
    color: var(--muted)
}

.honor-list li {
    margin: 16px 0
}

.honor-list strong {
    color: var(--ink);
    font-weight: 500
}

.not-found {
    text-align: center;
    padding: 120px 20px
}

.not-found h1 {
    font: 70px var(--serif)
}

@media(min-width:1500px) {
    .hero-inner {
        min-height: 700px
    }

    .portrait {
        height: 740px;
        width: 64%;
        right: -90px
    }

    .hero-copy {
        padding-bottom: 130px
    }
}

@media(max-width:1000px) {
    .wrap {
        width: calc(100% - 56px)
    }

    .hero-copy {
        width: 59%
    }

    .portrait {
        right: -80px;
        width: 65%;
        height: 630px
    }

    .hero h1 {
        font-size: 80px
    }

    .hero h2 {
        font-size: 36px
    }

    .hero-copy>p:not(.eyebrow) {
        max-width: 355px
    }

    .cards {
        gap: 15px
    }

    .card-body {
        padding: 20px 18px
    }

    .card-body h3 {
        font-size: 25px
    }

    .milestones {
        gap: 15px;
        padding: 22px 18px
    }

    .milestones p {
        font-size: 12px
    }

    .milestones .label {
        font-size: 22px
    }

    .detail-columns {
        gap: 35px;
        grid-template-columns: 1fr 230px
    }

    .work-feature {
        gap: 30px
    }

    .work-feature h2 {
        font-size: 38px
    }
}

@media(max-width:700px) {
    .wrap {
        width: calc(100% - 40px)
    }

    .site-header {
        height: 74px
    }

    .brand {
        font-size: 29px
    }

    .menu-toggle {
        display: block
    }

    .nav {
        display: none;
        position: absolute;
        top: 65px;
        left: 20px;
        right: 20px;
        background: #0d253af5;
        backdrop-filter: blur(20px);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 16px 25px;
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .nav.open {
        display: flex
    }

    .nav a {
        padding: 11px 0
    }

    .nav a[aria-current=page]:after {
        display: none
    }

    .hero {
        margin-top: -74px;
        padding-top: 74px
    }

    .hero-inner {
        min-height: 835px;
        display: block
    }

    .hero-copy {
        width: 100%;
        padding: 38px 0 0
    }

    .hero h1 {
        font-size: 72px;
        margin: 12px 0 16px
    }

    .hero h1 span {
        font-size: 24px
    }

    .hero h2 {
        font-size: 34px;
        max-width: 350px
    }

    .hero-copy>p:not(.eyebrow) {
        max-width: 370px;
        font-size: 15px
    }

    .hero .eyebrow {
        font-size: 11px;
        margin-bottom: 15px
    }

    .portrait-wrap {
        top: 370px;
        mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 68%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 68%, transparent)
    }

    .portrait {
        top: 0;
        right: -30px;
        width: 110%;
        height: 530px;
        object-position: center 24%;
        mask-image: linear-gradient(to right, transparent, #000 13%, #000 86%, transparent);
        -webkit-mask-image: linear-gradient(to left, transparent, #000 13%, #000 86%, transparent)
    }

    .hero-note {
        bottom: 18px;
        font-size: 10px
    }

    .actions {
        gap: 10px;
        margin-top: 23px
    }

    .button {
        padding: 10px 19px;
        font-size: 13px
    }

    .section {
        padding: 46px 0
    }

    .section-heading {
        gap: 15px
    }

    .section-heading h2 {
        font-size: 36px
    }

    .section-heading:after {
        display: none
    }

    .cards,
    .work-grid {
        grid-template-columns: 1fr
    }

    .card-image,
    .work-grid .card-image {
        height: 235px
    }

    .card-body h3 {
        font-size: 30px
    }

    .card-body p {
        font-size: 15px
    }

    .milestones {
        align-items: start;
        flex-direction: column;
        gap: 12px;
        margin-top: 28px;
        padding: 24px
    }

    .milestones p {
        font-size: 14px
    }

    .milestones p+p {
        padding-left: 0;
        border: 0
    }

    .home-about {
        padding: 45px 0 65px
    }

    .home-about h2 {
        font-size: 45px
    }

    .footer {
        padding-top: 45px
    }

    .footer h2 {
        font-size: 33px
    }

    .footer-bottom {
        font-size: 10px;
        padding-top: 42px
    }

    .socials {
        gap: 26px
    }

    .page-intro {
        padding: 45px 0 35px
    }

    .page-intro h1 {
        font-size: 54px
    }

    .page-intro .lead {
        font-size: 17px
    }

    .work-feature {
        grid-template-columns: 1fr;
        gap: 26px
    }

    .work-feature h2 {
        font-size: 40px
    }

    .archive-row {
        grid-template-columns: 45px 1fr;
        gap: 15px
    }

    .archive-row>a {
        grid-column: 2
    }

    .detail-title {
        font-size: 46px
    }

    .detail-summary {
        font-size: 18px
    }

    .project-meta {
        gap: 25px;
        margin: 25px 0
    }

    .detail-columns {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-top: 28px
    }

    .aside {
        position: static
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .about-portrait {
        max-height: 430px;
        max-width: 340px;
        margin: auto
    }

    .small-sections {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .resume-layout {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .resume-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 18px
    }

    .prose h2 {
        font-size: 32px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        transition: none !important
    }
}

/* Keep the portrait and research images clear at every size. */
.site-header {
    background: linear-gradient(#061525b8, #06152545)
}

.work-feature img {
    height: auto
}

.work-grid .project-card:not(:has(.card-image)) {
    display: flex;
    align-items: center;
    background: radial-gradient(ellipse at 100% 0%, #254f704d, transparent 70%), #0a2034
}

.work-grid .project-card:not(:has(.card-image)) .card-body {
    padding: 36px
}

.portrait-wrap {
    mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 65%, transparent 100%)
}

@media(max-width:700px) {
    .portrait-wrap {
        mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 68%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 68%, transparent)
    }
}

.detail-cover {
    height: auto
}

/* A little magic, with quiet motion that respects reduced-motion settings. */
.hero-robot {
    position: absolute;
    right: -24px;
    bottom: 0;
    width: 260px;
    height: auto;
    z-index: 5;
    filter: drop-shadow(0 0 18px #7dccff24);
    pointer-events: none;
    animation: robot-float 6s ease-in-out infinite
}

.home-about .wrap {
    position: relative
}

.home-about .content {
    position: relative;
    z-index: 2
}

.about-robot {
    position: absolute;
    right: 40px;
    bottom: -70px;
    width: 340px;
    height: auto;
    filter: drop-shadow(0 0 25px #86c9ff25);
    animation: robot-float 7s ease-in-out infinite
}

.home-about {
    min-height: 400px;
    background: linear-gradient(90deg, #061525e8 0%, #061525cc 35%, #06152520 100%), url('/assets/moon-garden.png') right 85%/cover
}

.magic-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: hidden
}

.magic-dust i {
    position: absolute;
    bottom: 4%;
    left: 53%;
    width: 3px;
    height: 3px;
    background: #d7f1ff;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px #9bcfff70;
    opacity: 0;
    animation: drift 8s ease-in-out infinite
}

.magic-dust i:nth-child(2) {
    left: 62%;
    animation-delay: 1.4s
}

.magic-dust i:nth-child(3) {
    left: 79%;
    animation-delay: 3s
}

.magic-dust i:nth-child(4) {
    left: 92%;
    animation-delay: 2s;
    width: 2px;
    height: 2px
}

.magic-dust i:nth-child(5) {
    left: 85%;
    animation-delay: 5s
}

.magic-dust i:nth-child(6) {
    left: 70%;
    animation-delay: 6s;
    width: 2px;
    height: 2px
}

.magic-dust i:nth-child(7) {
    left: 46%;
    animation-delay: 4.4s
}

.magic-dust i:nth-child(8) {
    left: 96%;
    animation-delay: 7s
}

@keyframes robot-float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes drift {
    0% {
        opacity: 0;
        transform: translate(0, 0)
    }

    25% {
        opacity: .7
    }

    75% {
        opacity: .4
    }

    100% {
        opacity: 0;
        transform: translate(-25px, -220px)
    }
}

@media(max-width:1000px) {
    .hero-robot {
        width: 210px;
        right: -20px
    }

    .about-robot {
        width: 280px;
        right: -20px
    }

    .home-about .content {
        max-width: 60%
    }
}

@media(max-width:700px) {
    .hero-robot {
        width: 180px;
        right: -20px;
        bottom: 18px
    }

    .about-robot {
        position: relative;
        right: auto;
        bottom: auto;
        width: 240px;
        margin: 16px auto -35px
    }

    .home-about .content {
        max-width: 100%
    }

    .home-about {
        padding-bottom: 45px
    }

    .magic-dust i {
        bottom: 8%
    }
}

@media(prefers-reduced-motion:reduce) {

    .hero-robot,
    .about-robot,
    .magic-dust i {
        animation: none
    }

    .magic-dust i {
        opacity: .35
    }
}

/* Let the portrait dissolve naturally into the garden, without companion graphics. */
.hero-robot,
.about-robot {
    display: none
}

.portrait-wrap {
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 61%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 61%, transparent 100%)
}

.portrait {
    filter: blur(.5px);
    transform: scale(1.03);
    mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 30%, #000 78%, transparent 100%)
}

.portrait-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #06152594 0%, transparent 38%, transparent 66%, #06152563 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    mask-image: radial-gradient(ellipse 47% 69% at 72% 42%, transparent 42%, #000 88%);
    -webkit-mask-image: radial-gradient(ellipse 47% 69% at 72% 42%, transparent 42%, #000 88%);
    pointer-events: none
}

@media(max-width:700px) {
    .portrait-wrap {
        mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 60%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 60%, transparent 100%)
    }

    .portrait {
        mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 18%, #000 80%, transparent 100%)
    }
}

/* Animated scene behind the isolated hero portrait. GIF playback is native and loops automatically. */
.hero:before {
    background: linear-gradient(90deg, #061525 0%, #061525c9 38%, #0615254f 64%, #061525 100%)
}

.portrait-wrap::after {
    display: none
}

.portrait-wrap {
    right: calc((min(1180px, calc(100vw - 96px)) - 100vw)/2);
    background-image: linear-gradient(90deg, #061525 0%, #061525e6 31%, #06152552 56%, transparent 72%), url('/assets/portrait_background.gif');
    background-position: center, right center;
    background-repeat: no-repeat;
    background-size: 100% 100%, min(620px, 52vw) min(620px, 52vw);
    mask-image: none;
    -webkit-mask-image: none
}

.portrait {
    top: 0;
    right: calc(min(620px, 52vw) - 370px);
    object-fit: contain;
    object-position: center bottom;
    filter: none;
    transform: none;
    mask-image: none;
    -webkit-mask-image: none;
    animation: portrait-bounce 3.4s cubic-bezier(.45, .05, .55, .95) infinite
}

@keyframes portrait-bounce {

    0%,
    100% {
        translate: 0 0
    }

    50% {
        translate: 0 -28px
    }
}

@media(max-width:700px) {
    .portrait-wrap {
        right: -20px;
        background-size: 100% 100%, min(480px, 96vw) min(480px, 96vw);
        background-position: center, right bottom
    }

    .portrait {
        right: 0;
        filter: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .portrait {
        animation: none
    }
}

@media(min-width:701px) {
    .portrait {
        top: 40px
    }
}

/* Match the hero canvas to the moonlit blue in the animated scene. */
.hero {
    background: #123f68
}

.hero:before {
    background: linear-gradient(90deg, #123f68fa 0%, #123f68ec 35%, #0d3559bd 58%, #061c33a8 78%, #0414258a 100%), linear-gradient(0deg, #041425 0%, transparent 68%)
}

.hero:after {
    background: linear-gradient(0deg, #020b16 0%, #031323f5 29%, #082440d2 52%, #0e345682 73%, transparent 100%)
}

.portrait-wrap {
    background-image: url('/assets/portrait_background.gif')
}

.portrait-wrap {
    left: calc((min(1180px, calc(100vw - 96px)) - 100vw)/2);
    --gif-size: min(700px, 58vw);
    background-position: left center;
    background-size: var(--gif-size) auto
}

.portrait-wrap::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    right: auto;
    left: calc(var(--gif-size) - 180px);
    width: 260px;
    height: var(--gif-size);
    translate: 0 -50%;
    background: transparent;
    filter: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    mask-image: linear-gradient(270deg, transparent 0%, #000 42%, #000 100%);
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 42%, #000 100%);
    pointer-events: none;
    display: block
}

@media(max-width:700px) {
    .portrait-wrap {
        left: -20px;
        --gif-size: min(540px, 105vw);
        background-position: left bottom;
        background-size: var(--gif-size) auto
    }

    .portrait-wrap::before {
        display: none
    }
}

.social-footer {
    padding: 30px 0
}

.brand {
    font: 14px/1 var(--sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c6dff2
}

/* Holographic social controls, adapted from the Uiverse effect supplied by May. */
.holographic-stack {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    perspective: 1000px
}

.holographic-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: #a9d9ff;
    text-decoration: none;
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), color .3s ease
}

.holographic-icon svg {
    position: relative;
    z-index: 2;
    width: 25px;
    height: 25px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.35;
    filter: drop-shadow(0 0 5px currentColor);
    transition: transform .3s ease
}

.holographic-icon.email {
    color: #bce9ff
}

.holographic-icon.github {
    color: #bcb5ff
}

.holographic-icon.linkedin {
    color: #86c9ff
}

.holographic-icon.x {
    color: #d7efff
}

.holographic-ring,
.holographic-particles,
.holographic-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none
}

.holographic-ring {
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-bottom-color: transparent;
    opacity: .7;
    animation: holo-rotate 3s linear infinite
}

.holographic-particles {
    background: radial-gradient(circle, transparent 20%, currentColor 21%, currentColor 28%, transparent 30%, transparent 41%, currentColor 42%, currentColor 48%, transparent 50%);
    background-size: 13px 13px;
    opacity: 0;
    transition: opacity .3s ease
}

.holographic-pulse {
    box-shadow: 0 0 17px currentColor;
    opacity: 0
}

.holographic-icon:hover,
.holographic-icon:focus-visible {
    color: #e1f5ff;
    transform: translateY(-8px) rotateX(18deg);
    outline: 0
}

.holographic-icon:hover svg,
.holographic-icon:focus-visible svg {
    transform: scale(1.16) rotate(8deg)
}

.holographic-icon:hover .holographic-particles,
.holographic-icon:focus-visible .holographic-particles {
    opacity: .3;
    animation: holo-particles 3s linear infinite
}

.holographic-icon:hover .holographic-pulse,
.holographic-icon:focus-visible .holographic-pulse {
    opacity: .55;
    animation: holo-pulse 2s ease-out infinite
}

.social-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.email-reveal { display:none; color:#f4fbff; font:600 13px/1 var(--sans); letter-spacing:0; text-transform:none; white-space:nowrap; text-shadow:0 1px 10px #06152580; }
.holographic-icon.email.is-revealed { display:grid; grid-template-columns:52px auto; gap:9px; width:auto; padding-right:8px; transform:none; }
.holographic-icon.email.is-revealed svg { grid-column:1; }
.holographic-icon.email.is-revealed .holographic-ring,.holographic-icon.email.is-revealed .holographic-particles,.holographic-icon.email.is-revealed .holographic-pulse { left:0; width:52px; height:52px; }
.holographic-icon.email.is-revealed .email-reveal { display:block; grid-column:2; }
.holographic-icon.email.is-revealed:hover,.holographic-icon.email.is-revealed:focus-visible { transform:translateY(-3px); }
@media(max-width:600px){.holographic-stack{gap:10px}.email-reveal{font-size:11px}.holographic-icon.email.is-revealed{grid-template-columns:42px auto;gap:5px;padding-right:0}.holographic-icon.email.is-revealed .holographic-ring,.holographic-icon.email.is-revealed .holographic-particles,.holographic-icon.email.is-revealed .holographic-pulse{width:42px;height:42px}}

@keyframes holo-rotate {
    to {
        transform: rotate(360deg)
    }
}

@keyframes holo-particles {
    to {
        background-position: 26px 26px
    }
}

@keyframes holo-pulse {
    0% {
        transform: scale(.8);
        opacity: .5
    }

    50% {
        transform: scale(1.1);
        opacity: .2
    }

    100% {
        transform: scale(1.3);
        opacity: 0
    }
}

@media(prefers-reduced-motion:reduce) {

    .holographic-ring,
    .holographic-icon:hover .holographic-particles,
    .holographic-icon:focus-visible .holographic-particles,
    .holographic-icon:hover .holographic-pulse,
    .holographic-icon:focus-visible .holographic-pulse {
        animation: none
    }

    .holographic-icon:hover,
    .holographic-icon:focus-visible {
        transform: none
    }

}

.holographic-icon.email svg {
    fill: none;
    stroke-width: 1.7
}

/* Independent floating photo layer; the main cutout keeps its existing position. */
.portrait-wrap > .portrait { z-index: 3; }
.portrait-memories {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.portrait-memory {
    position: absolute;
    margin: 0;
    padding: 5px;
    border: 1px solid #d1edff80;
    border-radius: 15px;
    background: #b8dfff20;
    box-shadow: 0 10px 26px #03132260, 0 0 20px #b8dfff20;
    rotate: var(--tilt);
    animation: memory-float var(--float-duration, 5s) ease-in-out infinite;
}
.portrait-memory img,
.portrait-memory video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.memory-research {
    --tilt: 7deg;
    width: clamp(193px, 19.9vw, 281px);
    height: clamp(223px, 22.3vw, 310px);
    right: 70px;
    top: 150px;
    z-index: 2;
    overflow: hidden;
}
.memory-research img { object-position: 82% center; transform: scale(1.2); transform-origin: right center; }
.memory-isef {
    --tilt: 8deg;
    --float-duration: 5.8s;
    width: clamp(101px, 11.3vw, 158px);
    height: clamp(104px, 12.3vw, 167px);
    right: 479px;
    top: 30px;
    z-index: 1;
    animation-delay: -2s;
}
.memory-isef img { object-position: 32% center; }
.memory-award {
    --tilt: 7deg;
    --float-duration: 5.4s;
    width: clamp(184px, 19.5vw, 276px);
    height: clamp(101px, 10.9vw, 154px);
    right: 335px;
    top: 150px;
    z-index: 2;
    animation-delay: -1.2s;
}
.memory-award img,
.memory-award video { object-position: center; }
.memory-outdoors {
    --tilt: 11deg;
    --float-duration: 6.4s;
    width: clamp(198px, 21.9vw, 297px);
    height: clamp(241px, 28.6vw, 364px);
    right: 319px;
    bottom: 10px;
    z-index: 1;
    animation-delay: -3.5s;
}
.memory-outdoors { z-index: 2; }
.memory-outdoors img { object-position: center 44%; }
@keyframes memory-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -9px; }
}
@media (max-width: 700px) {
    .memory-research { right: auto; left: 12px; top: 24px; width: 126px; height: 144px; }
    .memory-isef { right: 10px; top: 45px; width: 117px; height: 141px; }
    .memory-award { right: 12px; top: 165px; width: 165px; height: 92px; }
    .memory-outdoors { right: 12px; bottom: 15px; width: 138px; height: 173px; }
}
@media (prefers-reduced-motion: reduce) {
    .portrait-memory { animation: none; }
}
/* Fade the GIF itself at its right edge so no rectangular blur panel appears. */
.portrait-wrap { background-image: none; }
.portrait-wrap::before {
    z-index: 0;
    top: 0;
    left: 0;
    right: auto;
    width: var(--gif-size);
    height: 100%;
    translate: none;
    background: url('/assets/portrait_background.gif') left center / var(--gif-size) auto no-repeat;
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    mask-image: linear-gradient(270deg, transparent 0%, #000 30%, #000 100%);
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 30%, #000 100%);
}
.portrait-wrap::before { display:none !important; }
.portrait-background-gif {
    position:absolute;
    z-index:0;
    top:50%;
    left:0;
    width:var(--gif-size);
    height:var(--gif-size);
    transform:translateY(-50%);
    object-fit:cover;
    pointer-events:none;
    contain:paint;
    isolation:isolate;
    will-change:transform;
    mask-image:linear-gradient(270deg,transparent 0%,#000 30%,#000 100%);
    -webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 30%,#000 100%);
}
@media (min-width: 701px) {
    .site-header { height: 56px; }
    .hero { min-height: 700px; margin-top: -56px; padding-top: 56px; }
    .hero-inner { min-height: 670px; }
}

/* Kept last so the light-mode palette wins over older page rules. */
/* A simple stack keeps the top news rail independent of older grid layouts. */
body.about-page .about-teaching-wrap { display:flex; flex-direction:column; gap:50px; }
body.about-page .press-section { order:1; }
body.about-page .featured-section { order:2; }
body.about-page .art-section { order:3; }
/* Place press coverage before the logo wall on About. */
body.about-page .press-section { width:min(1100px,calc(100vw - 48px)) !important; max-width:none; align-self:center !important; flex:0 0 auto; box-sizing:border-box; }
body.about-page .press-section { grid-column:1 / -1; grid-row:1; width:100%; max-width:none; margin:0; padding-top:0; }
body.about-page .featured-section { grid-column:1 / -1; grid-row:2; }
body.about-page .art-section { grid-column:1 / -1; grid-row:3; }
body.about-page .press-section header { display:flex; align-items:baseline; gap:12px; max-width:none; margin:0 0 12px; }
body.about-page .press-section header .eyebrow { margin:0; white-space:nowrap; }
body.about-page .press-section header h2 { margin:0; font-size:clamp(22px,2.4vw,31px); }
body.about-page .news-container { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 24px) / 3); grid-template-columns:none; gap:12px; width:100%; padding:2px 2px 14px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:#9fbcc7 #ffffff80; }
body.about-page .news-item { min-height:116px; grid-template-columns:1fr; gap:5px; padding:14px 16px; }
body.about-page .news-meta { display:block; }
body.about-page .news-item h3 { margin:0; font-size:14px; line-height:1.3; }
body.about-page .news-item p { margin:4px 0 0; font-size:11px; line-height:1.35; }
body.about-page .news-item p:last-child { display:none; }
@media(max-width:640px) { body.about-page .press-section header { display:block; } body.about-page .press-section header .eyebrow { margin-bottom:7px; } body.about-page .news-container { grid-auto-columns:minmax(245px,82vw); } }
/* Keep the About logo wall wide; this follows the legacy layout rules above. */
@media(min-width:700px) {
    .about-teaching-wrap { grid-template-columns:minmax(0,1fr) 230px; gap:20px; }
    body.about-page .featured-section { grid-column:1; grid-row:1; }
    body.about-page .press-section { grid-column:2; grid-row:1; width:100%; max-width:230px; justify-self:end; align-self:start; }
    body.about-page .art-section { grid-column:1 / -1; grid-row:2; }
}
body:not(.home-page) { --bg:#e0f4fb; --panel:#ffffff; --ink:#243949; --muted:#587083; --blue:#705185; --line:#7899aa42; background:#e0f4fb; color:#243949 }
body:not(.home-page) .page-shell { background:radial-gradient(ellipse at 4% 96%,#163b6d92 0%,transparent 42%),radial-gradient(circle at 95% 8%,#ffb58c85 0%,transparent 35%),radial-gradient(ellipse at 92% 69%,#c58cd879 0%,transparent 42%),radial-gradient(circle at 8% 34%,#78c8ee82 0%,transparent 39%),linear-gradient(135deg,#bfe5f5 0%,#eaf6fa 43%,#f3dcef 100%) }
body:not(.home-page) .site-header { border-bottom-color:#8fb2ce70; background:linear-gradient(90deg,#061525,#123f68) }
body:not(.home-page) .site-header .nav a,body:not(.home-page) .menu-toggle { color:#edf8ff }
body:not(.home-page) .footer { background:#dceff5; border-top-color:#b4d5df }
body:not(.home-page) .footer-bottom { border-top-color:#b4d5df }
body.about-page .press-section { border-top-color:#b6d3dc }
body.about-page .news-item { border-color:#b8d5de; background:#ffffffcf; box-shadow:0 8px 22px #5c859112 }
body.about-page .news-item time,body.about-page .news-item a { color:#765487 }
body.about-page .news-item h3 { color:#263c4c }
body.about-page .news-item p { color:#587083 }
body:not(.home-page) .detail-summary,body:not(.home-page) .caption,body:not(.home-page) .prose p { color:#587083 }
body:not(.home-page) .project-meta,body:not(.home-page) .aside { border-color:#b8d5de; background:#ffffffbd }
body:not(.home-page) .project-meta div,body:not(.home-page) .aside .text-link,body:not(.home-page) .tags span { border-color:#b8d5de }
body:not(.home-page) .holographic-icon.email { color:#9a4f79 }
body:not(.home-page) .holographic-icon.github { color:#496f91 }
body:not(.home-page) .holographic-icon.linkedin { color:#337398 }
body:not(.home-page) .holographic-icon.x { color:#5d5788 }
body:not(.home-page) .holographic-icon:hover,body:not(.home-page) .holographic-icon:focus-visible { color:#243949 }