/* Main project titles sit over the image, with descriptions at the bottom. */
#body-projects .main-project { position: relative; }
#body-projects .main-project > .main-project-link { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 0; background: transparent; }
#body-projects .main-project-link:hover { filter: none; }
#body-projects .main-project-intro { display: block; padding: clamp(.5rem, 1vw, 1rem); background: rgba(0, 0, 0, .8); font-size: clamp(.85rem, 1.1vw, 1rem); line-height: 1.3; overflow-wrap: anywhere; }
#body-projects .main-project-description { display: block; }
#body-projects .main-project-cta { display: block; margin-top: .5rem; text-decoration: underline; text-underline-offset: .2em; }
#body-projects .main-project-title,
#body-projects .research-area-title { display: block; padding: clamp(.75rem, 1.5vw, 1.5rem); background: transparent; font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 600; line-height: 1.1; text-shadow: 0 2px 6px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .7); }
#body-projects .main-project-new-tab { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 450px) {
    #body-projects .div-showcase.main-project { width: 100%; }
}

/* Thumbnail-and-text rows follow the technical reports layout. */
#body-projects .project-list { list-style: none; padding: 0; margin: 0; }
#body-projects .past-project { display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 2rem); padding-block: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.2); }
#body-projects .project-thumbnail-frame { display: block; flex: 0 0 clamp(90px, 8vw, 140px); width: clamp(90px, 8vw, 140px); aspect-ratio: 1; overflow: hidden; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--light-color) 50%, transparent); }
#body-projects .project-thumbnail { display: block; width: 100%; height: 100%; object-fit: cover; }
#body-projects .project-content { min-width: 0; overflow-wrap: anywhere; }
#body-projects .project-content h3 { margin: 0 0 .4rem; font-size: var(--normal-text-size); }
#body-projects .project-content p { margin: .5rem 0; }
#body-projects .project-content { font-size: var(--caption-text-size); }
#body-projects .project-meta { color: #c5c5c5; }
#body-projects .project-subtitle { font-style: italic; }
#body-projects details { margin-top: .75rem; }
#body-projects summary { cursor: pointer; width: fit-content; }
#body-projects h4 { margin: 1rem 0 .35rem; }
#body-projects details ul { padding-left: 1.25rem; }
#body-projects a:focus-visible, #body-projects summary:focus-visible { outline: 2px solid var(--mark-color); outline-offset: 5px; }
#body-projects #div-content { padding-bottom: 7rem; }
#body-projects nav > div { display: flex; overflow-x: auto; white-space: nowrap; max-width: 100%; padding-block: .3rem; }
@media (max-width: 700px) {
    #body-projects #div-content { padding-left: 6vw; padding-right: 6vw; }
    #body-projects .div-showcase { width: 42vw; margin-bottom: 3vw; }
    #body-projects .project-content h3 { font-size: 1.35rem; }
}
@media (orientation: portrait) {
    #body-projects { --normal-text-size: 1.4rem; --caption-text-size: 1.1rem; }
}

#body-projects .project-thumbnail-toggle { flex: 0 0 clamp(90px, 8vw, 140px); padding: 0; border: 0; background: transparent; cursor: pointer; }
#body-projects .project-thumbnail-toggle:focus-visible { outline: 2px solid var(--mark-color); outline-offset: 5px; }
#body-projects button {padding: 0; margin: 0; border: 0;}

#body-projects .project-thumbnail-frame.project-thumbnail-toggle { border: 1px solid color-mix(in srgb, var(--light-color) 50%, transparent); }
#body-projects .project-thumbnail { transition: transform 0.4s ease, filter 0.2s ease; }
@media (hover: hover) {
    #body-projects .project-thumbnail-frame:hover .project-thumbnail { transform: scale(1.05); }
}
#body-projects .project-thumbnail-toggle:focus-visible .project-thumbnail { transform: scale(1.05); }