/* Individual artwork, molecular sculpture, and the color system for the gallery. */
:root { --paper:#fafbff; --line:#ccd3e3; }
body { background:var(--paper); }
html { scroll-padding-top:76px; }
.nav { background:#141a2a; color:#f5f7ff; border-color:#303b53; }
.nav .brand { color:#f5f7ff; }
.nav .brand i { color:#b1caff; }
.nav nav a span { color:#a0afc9; }
.nav nav a.active, .nav a:hover { color:#b1caff; }
.search-open { color:#c8d5ee; }
.nav-contact { border-color:#536077; }
.nav nav a { font-size:13px; }
.hero { padding-top:28px; padding-bottom:6px; }
.hero-prelude>.mono { font-size:10px; }
.hero-status { background:#e7f1d1; padding:7px 13px; border:1px solid #cbdcb0; font-size:12px; }
.hero-status .mono { font-size:10px; padding:0; border:0; color:#40562d; }
.hero-grid { gap:46px; margin-top:28px; }
.hero h1 { font-size:clamp(72px,10.3vw,156px); margin-bottom:30px; }
.hero-role { font-size:20px; }
.intro>p:nth-child(2) { font-size:16px; }
.hero-links { margin-top:27px; }
.hero-links .solid-link { background:var(--blue); padding:15px 20px; font-size:13px; }
.hero-links .solid-link:hover { background:#153ed9; }
.hero-links .under-link { font-size:13px; }
.hero-socials { font-size:12px; }
.map-hint { font-size:10px; }
.molecule-panel { min-width:0; background:#e6eeff url('../images/molecular-field.svg') center/cover; border:1px solid #c6d1f0; box-shadow:7px 7px 0 #d7e1f8; position:relative; overflow:visible; isolation:isolate; }
.molecule-heading { display:flex; justify-content:space-between; align-items:center; padding:23px 25px 0; position:relative; z-index:1; }
.molecule-heading .mono { font-size:10px; color:#536788; }
.molecule-heading h2 { font-size:32px; letter-spacing:-1.4px; margin-top:7px; }
.molecule-heading h2 span { color:var(--blue); }

.molecule-stage { position:relative; height:362px; }
#molecule-canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
#molecule-canvas:active { cursor:grabbing; }
.molecule-fallback { display:block; width:100%; height:100%; object-fit:contain; }
.molecule-corner { position:absolute; width:18px; height:18px; pointer-events:none; opacity:.55; }
.molecule-corner.top-left { left:21px; top:17px; border-left:1px solid #3c65b8; border-top:1px solid #3c65b8; }
.molecule-corner.bottom-right { right:21px; bottom:12px; border-right:1px solid #3c65b8; border-bottom:1px solid #3c65b8; }

.section-label .mono { font-size:11px; }
.building { background:#141a2a; padding:60px 0; }
.build-grid { gap:52px; }
.building-visual { min-width:0; box-shadow:7px 7px 0 #334267; }
.building-visual .poster-link { border-color:#7d99d5; }
.building-visual-caption { display:flex; justify-content:center; align-items:center; gap:14px; padding:15px; font-size:12px; background:#e2eaff; color:#23365c; border:1px solid #7d99d5; border-top:0; }
.building-visual-caption i { color:#456dea; font-style:normal; }
.build-copy>p:not(.build-lead) { font-size:15px; }
.build-tags { font-size:10px; }
.system-diagram { background:#202944; border-color:#415277; }
.diagram-top { font-size:10px; }
.diagram-caption { font-size:12px; }
.diagram-bottom .mono { font-size:8px; }
.research { padding-top:60px; padding-bottom:60px; }
.research-heading { margin-bottom:34px; }
.research-heading p { font-size:15px; }
.research-gallery { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; margin-bottom:43px; }
.project-card { grid-column:span 4; min-width:0; position:relative; }
.project-card:first-child { grid-column:span 6; }
.project-card:nth-child(2) { grid-column:span 6; }
.project-card:nth-child(n+6) { grid-column:span 6; }
.poster-link { display:block; overflow:hidden; position:relative; border:1px solid #b8c5e0; background:var(--card-tint); }
.poster-link>img { width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.poster-link:hover>img { transform:scale(1.025); }
.poster-caption { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 16px; background:var(--card-tint); border-inline:1px solid #b8c5e0; border-bottom:1px solid #b8c5e0; min-height:79px; }
.poster-caption h3 { font-size:23px; font-weight:500; letter-spacing:-.8px; line-height:1.2; }
.poster-caption p { font-size:11px; line-height:1.6; color:#4e5b72; margin-top:5px; }
.poster-caption .poster-open { width:34px; height:34px; border:1px solid #98a8c5; display:grid; place-items:center; flex:0 0 34px; background:#ffffff9e; color:#182845; font-size:17px; }
.poster-caption .poster-open:hover { background:var(--blue); color:white; border-color:var(--blue); }
.poster-link>span { position:absolute; inset:auto 13px 12px auto; display:flex; gap:7px; align-items:center; font-size:10px; padding:6px 9px; background:#fff; border:1px solid #ced7ea; opacity:0; transform:translateY(4px); transition:opacity .2s,transform .2s; }
.poster-link:hover>span, .poster-link:focus-visible>span { opacity:1; transform:none; }
.poster-link>span b { font-size:15px; font-weight:400; }
.filters button { font-size:12px; padding:9px 14px; }
.research-toolbar { padding-bottom:16px; }
.research-hint { font-size:10px; }
.paper-title h3 { font-size:20px; }
.paper-venue { font-size:11px; }
.paper-number { font-size:11px; }
.paper-body { grid-template-columns:300px 1fr; }
.paper-body img { max-height:245px; }
.paper-body p { font-size:14px; }
.paper-body .authors { font-size:11px; }
.paper-links { font-size:13px; }
.research-note { font-size:10px; }
.poster-dialog { width:min(1060px,calc(100% - 40px)); padding:0; color:#111827; background:#f8faff; border:1px solid #8fa5ce; max-height:94vh; box-shadow:12px 12px 0 #0003; }
.poster-dialog::backdrop { background:#10192dd9; }
.poster-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 20px; border-bottom:1px solid #c8d3e8; }
.poster-dialog-header h2 { font-size:24px; letter-spacing:-.7px; }
.poster-dialog-close { font-size:13px; }
.poster-dialog-close span { margin-left:12px; font-size:24px; vertical-align:middle; }
.poster-dialog-image { width:100%; height:auto; max-height:76vh; object-fit:contain; background:#e6ecf8; }
.poster-dialog-footer { display:flex; justify-content:space-between; align-items:center; padding:15px 20px; font-size:12px; border-top:1px solid #c8d3e8; }
.poster-dialog-footer>span { color:#63718a; }
.poster-dialog-footer>a { color:var(--blue); }
.about { padding-top:65px; }
.about-copy p { font-size:15px; }
.about-links { font-size:12px; }
.trajectory { background:#eef2fa; border:1px solid #cdd6e8; padding:24px; margin-top:50px; }
.trajectory-grid .mono { font-size:10px; }
.trajectory-grid p { font-size:12px; }
.trajectory-grid>div>span:last-child { font-size:11px; }
.writing { padding-bottom:60px; }
.writing-row { background:#f1f3fa; padding-inline:18px; }
.writing-row:nth-of-type(2n) { background:#e8eefb; }
.contact { background:#141a2a; }
@media (max-width:1100px) {
 .hero-grid { gap:26px; }.hero h1 { font-size:10vw; }
 .molecule-stage { height:315px; }.molecule-heading { padding:19px 18px 0; }

 .hero-role { font-size:18px; }.intro>p:nth-child(2) { font-size:14px; }
 .research-gallery { gap:18px; }.poster-caption { padding:12px; }.poster-caption h3 { font-size:20px; }
 .poster-caption p { font-size:10px; }.trajectory { padding:20px; }.trajectory-grid .mono { font-size:8px; }
}
@media (max-width:760px) {
 html { scroll-padding-top:65px; }
 .nav nav a { font-size:11px; }.nav { gap:16px; }
 .hero { padding-top:20px; }.hero-prelude>.mono { font-size:8px; }.hero-status { padding:5px 8px; font-size:9px; }
 .hero-grid { gap:29px; margin-top:30px; }.hero h1 { font-size:20vw; margin-bottom:23px; }
 .hero-role { font-size:16px; }.intro>p:nth-child(2) { font-size:14px; }.hero-links .solid-link { padding:13px 16px; font-size:12px; }
 .hero-links .under-link { font-size:12px; }.hero-socials { font-size:11px; }
 .molecule-heading { padding:18px 17px 0; }.molecule-heading .mono { font-size:8px; }.molecule-heading h2 { font-size:28px; }
 .molecule-stage { height:300px; }

 .section-label .mono { font-size:8px; }.building { padding:44px 0; }.build-copy>p:not(.build-lead) { font-size:14px; }.build-tags { font-size:8px; }
 .diagram-top { font-size:8px; }.diagram-caption { font-size:10px; }.diagram-bottom .mono { font-size:7px; }
 .research { padding-top:45px; padding-bottom:42px; }.research-heading p { font-size:13px; }
 .research-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 15px; margin-bottom:30px; }
 .project-card, .project-card:first-child, .project-card:nth-child(2), .project-card:nth-child(n+6) { grid-column:span 1; }
 .project-card:first-child { grid-column:span 2; }.project-card:nth-child(2) { grid-column:span 2; }
 .project-card:last-child { grid-column:span 2; }
 .poster-caption { min-height:83px; padding:12px 10px; gap:8px; }.poster-caption h3 { font-size:19px; }.poster-caption p { font-size:10px; }
 .project-card:first-child .poster-caption h3,.project-card:nth-child(2) .poster-caption h3,.project-card:last-child .poster-caption h3 { font-size:25px; }
 .poster-caption .poster-open { width:27px; height:27px; flex-basis:27px; font-size:15px; }.poster-link>span { display:none; }
 .filters { gap:0; }.filters button { padding:8px 9px; font-size:10px; }.paper-title h3 { font-size:17px; }.paper-venue { font-size:9px; }
 .paper-number { font-size:9px; }.paper-body { grid-template-columns:1fr; }.paper-body p { font-size:13px; }.paper-body .authors { font-size:10px; }.paper-links { font-size:12px; }
 .research-note { font-size:9px; }.poster-dialog { width:calc(100% - 24px); }.poster-dialog-header { padding:13px 15px; }.poster-dialog-header h2 { font-size:22px; }
 .poster-dialog-footer { display:block; padding:13px 15px; font-size:11px; }.poster-dialog-footer>a { display:block; margin-top:8px; }.poster-dialog-footer>span { font-size:10px; }
 .about { padding-top:46px; }.about-copy p { font-size:14px; }.about-links { font-size:11px; }
 .trajectory { padding:20px 16px; margin-top:37px; }.trajectory-grid { gap:25px 15px; }.trajectory-grid .mono { font-size:8px; }.trajectory-grid p { font-size:11px; }.trajectory-grid>div>span:last-child { font-size:10px; }
 .writing-row { padding-inline:12px; gap:12px; }.writing-row .mono { font-size:8px; }.writing-row h3 { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) { .poster-link>img { transition:none; } }
@media (max-width:520px) {
 .research-gallery { grid-template-columns:minmax(0,1fr); gap:20px; }
 .project-card, .project-card:first-child, .project-card:nth-child(2), .project-card:nth-child(n+6), .project-card:last-child { grid-column:span 1; }
 .poster-caption h3, .project-card:first-child .poster-caption h3, .project-card:nth-child(2) .poster-caption h3, .project-card:last-child .poster-caption h3 { font-size:24px; }
 .poster-caption { min-height:78px; padding:14px; }
 .poster-caption .poster-open { width:33px; height:33px; flex-basis:33px; }
}

/* Neighborhood contours stay on the molecular canvas; the research card stays to its right. */
.atom-targets { position:absolute; inset:0; pointer-events:none; }
.atom-target { position:absolute; transform:translate(-50%,-50%); width:34px; height:34px; padding:0; pointer-events:auto; border:1px solid #f3f7ff85; border-radius:50%; color:transparent; background:transparent; font:12px var(--mono); transition:background .18s,border-color .18s; }
.atom-target:hover,.atom-target:focus-visible { background:#2457ff; border-color:#fff; color:white; outline-offset:4px; }
.molecule-hover-inspector { --thread-color:#175c75; --thread-tint:#e1f4f5; position:absolute; z-index:50; display:block; width:230px; pointer-events:auto; }
.molecule-hover-inspector[hidden] { display:none; }
.molecule-thread { min-width:0; flex:1; background:var(--thread-tint); border:1px solid #98aecb; padding:12px 14px 10px; box-shadow:4px 5px 0 #9cafd13d; }
.molecule-hover-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.molecule-hover-heading>span { font:9px var(--mono); color:var(--thread-color); letter-spacing:1px; }
.molecule-hover-close { padding:0; font-size:21px; line-height:1; color:#526982; }
.molecule-thread h2 { font-size:22px; letter-spacing:-.9px; line-height:1.08; margin-top:8px; }
.molecule-thread>p { font-size:12px; line-height:1.55; color:#455b71; margin-top:8px; }
.molecule-thread-links { margin-top:10px; }
.molecule-thread-links a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid #7894b43b; font-size:13px; line-height:1.3; }
.molecule-thread-links a small { display:block; font-size:9px; color:#536b85; margin-top:3px; }
.molecule-thread-links a b { color:var(--thread-color); font-size:17px; font-weight:400; }
.molecule-hover-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:8px; margin-top:6px; border-top:1px solid #7894b43b; font-size:9px; color:#607791; }
#molecule-pin { font-size:10px; padding:3px 0; color:var(--thread-color); }
.molecule-hover-inspector:not([hidden]) .molecule-thread { animation:atom-card-enter .15s ease both; }
@keyframes atom-card-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media(max-width:760px) {
 .molecule-heading h2 { font-size:27px; }
 .molecule-hover-inspector { width:230px; }
 .molecule-thread { padding:14px 14px 11px; }
 .molecule-thread h2 { font-size:23px; }
 .molecule-thread>p { font-size:12px; }
}

.molecule-stage { user-select:none; }

.molecule-stage[data-layout='compact'] #molecule-canvas { height:315px; }
.molecule-stage[data-layout='compact'].has-inspection { height:auto; }
.molecule-stage[data-layout='compact'] .molecule-hover-inspector { position:relative; left:auto!important; top:auto!important; margin:8px 12px 14px auto; }
@media(max-width:760px) { .molecule-stage[data-layout='compact'] #molecule-canvas { height:300px; } }

.molecule-panel { user-select:none; }