/* Clear glass: low haze, transmitted color and light concentrated at the rim. */
.project-grid { position: relative; gap: 28px; }
/* Keep the image blend connected to the page backdrop. Backdrop filters and
   card transforms would isolate it and bring the white image rectangle back. */
.research-project { position: relative; padding: 12px; overflow: hidden; border-radius: 28px; border: 1px solid rgba(255,255,255,.48); background: linear-gradient(125deg, rgba(255,255,255,.16), rgba(255,255,255,.015) 32%, rgba(255,255,255,.025) 72%, rgba(255,255,255,.13)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 26px -15px rgba(62,55,40,.20), inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(153,99,74,.13), inset 1px 0 2px rgba(255,255,255,.6), 0 0 0 1px rgba(83,75,58,.035); transition: none; }
/* The masked highlight is confined to the perimeter; it cannot wash out text. */
.research-project::after { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--light-angle, 155deg), rgba(255,255,255,.1), rgba(255,255,255,.96) 15%, rgba(255,255,255,.12) 31%, rgba(153,99,74,.16) 45%, rgba(255,255,255,.95) 63%, rgba(255,255,255,.08) 82%, rgba(255,255,255,.6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.project-image { height: 238px; padding: 20px 26px; margin: 0; border: 1px solid transparent; border-radius: 19px; background: transparent; overflow: hidden; box-shadow: none; mix-blend-mode: multiply; }
.project-image img { width: auto; max-width: 100%; max-height: 198px; object-fit: contain; mix-blend-mode: normal; }
.project-image--xrl img { max-height: 198px; }
.project-image--trellis img { width: 100%; max-height: 194px; }
.project-image--treepinn img { max-height: 204px; }
.project-image--xai img { max-height: 198px; }
.project-image--irebalance img { width: 100%; max-height: 145px; }
.project-image--medical img { max-height: 204px; }
.project-image--ear img { max-height: 198px; }
.project-description { padding: 23px 14px 14px; }
.project-description .project-topic { color: #717568; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 10px; }
.project-description h3 { font-size: 23px; line-height: 1.3; letter-spacing: -.03em; font-weight: 550; }
.project-description h3 a:hover { color: var(--accent); }
.project-heading { align-items: center; gap: 14px; }
.project-venue { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.86); border-radius: 999px; color: #786951; font-size: 11px; line-height: 1.5; padding: 5px 9px; background: rgba(153,99,74,.045); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.project-description p:not(.project-topic) { margin: 13px 0 24px; color: #60695a; font-size: 14px; line-height: 1.8; }
.project-links { display: flex; align-items: center; gap: 22px; padding-top: 0; }
.project-links a { font-size: 12px; padding: 8px 0; text-decoration-color: #c6ac96; }
.project-links .project-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 18px; border: 1px solid rgba(153,99,74,.27); border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.02) 45%, rgba(153,99,74,.10)), rgba(153,99,74,.21); color: #70452f; font-size: 12px; font-weight: 550; line-height: 1.65; text-decoration: none; -webkit-backdrop-filter: blur(5px) saturate(130%); backdrop-filter: blur(5px) saturate(130%); box-shadow: 0 3px 10px rgba(153,99,74,.075), inset 0 1px 0 rgba(255,255,255,.82), inset 1px 0 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(153,99,74,.10); transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.project-links .project-primary:hover { background-color: rgba(153,99,74,.30); color: #653c29; box-shadow: 0 5px 14px rgba(153,99,74,.12), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(153,99,74,.14); }
.project-links .project-primary:active { transform: scale(.98); }
.research-project:focus-within { box-shadow: 0 10px 30px rgba(62,55,40,.065), inset 0 1px 0 white, 0 0 0 1px rgba(153,99,74,.12); }
.research-project:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); gap: 12px; }
.research-project:last-child .project-image { height: 100%; min-height: 230px; }
.research-project:last-child .project-description { padding: 21px 22px 21px 15px; justify-content: center; }
.research-project:last-child .project-links { margin-top: 0; }
/* Keep card compositing stable on hover so image whites continue blending. */
@media (hover: hover) and (pointer: fine) { .research-project:hover { border-color: rgba(153,99,74,.22); } }
@media (max-width: 1000px) { .project-grid { gap: 22px; } .project-image { height: 212px; padding: 18px 22px; } .project-image img { max-height: 175px; } .project-image--xrl img, .project-image--treepinn img, .project-image--medical img { max-height: 180px; } .project-image--xai img { max-height: 175px; } .project-description { padding: 21px 11px 12px; } .project-description h3 { font-size: 21px; } .project-heading { align-items: start; flex-wrap: wrap; gap: 8px; } }
@media (max-width: 700px) { .project-grid { gap: 25px; } .research-project { padding: 10px; border-radius: 26px; } .project-image { height: 204px; padding: 18px 20px; border-radius: 17px; } .project-description { padding: 20px 12px 12px; } .project-description .project-topic { font-size: 11px; } .project-description h3 { font-size: 22px; } .project-description p:not(.project-topic) { font-size: 13px; margin-bottom: 22px; } .project-links { gap: 18px; flex-wrap: wrap; } .project-links a { font-size: 11px; } .project-links .project-primary { font-size: 11px; min-height: 44px; padding-inline: 16px; } .research-project:last-child { display: flex; grid-column: auto; gap: 0; } .research-project:last-child .project-image { height: 204px; min-height: 0; } .research-project:last-child .project-description { padding: 20px 12px 12px; } .research-project:last-child .project-links { margin-top: auto; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .research-project { background: #fdfcf9; } .project-links .project-primary { background: #e9d9ce; } }
@media (prefers-reduced-transparency: reduce) { .research-project, .research-project:hover { background: #fdfcf9; -webkit-backdrop-filter: none; backdrop-filter: none; } .project-image { background: #fff; } .project-links .project-primary { background: #e9d9ce; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .research-project, .project-links .project-primary { transition: none; } .research-project:hover, .project-links .project-primary:active { transform: none; } }
@media (forced-colors: active) { .research-project, .project-venue, .project-links .project-primary { border: 1px solid CanvasText; box-shadow: none; } .project-links .project-primary { color: LinkText; background: Canvas; } }

@media (prefers-reduced-transparency: reduce), (forced-colors: active) { .project-grid::before { display: none; } }

@media (prefers-reduced-transparency: reduce), (forced-colors: active) { .research-project::after { display: none; } }

/* The animated reflection is a sibling of the cards. Its compositing layer
   never becomes an ancestor of the multiply-blended illustrations. */
.project-reflection { display: none; pointer-events: none; position: absolute; z-index: 2; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .project-reflection { display: block; opacity: 0; background: radial-gradient(ellipse 260px 165px at var(--light-x, 50%) var(--light-y, 0%), rgba(255,255,255,.27), transparent 78%); transition: opacity 180ms ease; }
 .project-reflection.is-active { opacity: 1; }
 .project-reflection::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--light-angle, 155deg), transparent, rgba(255,255,255,.9) 20%, transparent 42%, rgba(255,255,255,.6) 70%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) { .project-reflection { display: none; } }

/* Crop the PDF figure's a/b heading row in the page; preserve the source asset. */
.treepin-figure-crop { display: block; width: 100%; max-width: 414px; aspect-ratio: 1800 / 865; overflow: hidden; }
.project-image--treepinn .treepin-figure-crop img { display: block; width: 100%; max-width: none; height: auto; max-height: none; margin-top: -4.444444%; }
@media (max-width: 1000px) { .treepin-figure-crop { max-width: 365px; } }

/* Transparent padding makes small resources easier to hit without adding visual weight. */
.project-links a:not(.project-primary) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 4px; }
@media (max-width: 700px) { .project-links a, .project-links .project-primary { font-size: 12px; } }