.projects-portfolio{--project-border:#dde1e5;--project-muted:#53616b;--project-photo-bg:#e8ecef;color:var(--color-text);padding-bottom:6rem;}
:root[data-theme="dark"] .projects-portfolio{--project-border:#333c42;--project-muted:#bdc7ce;--project-photo-bg:#141a1e;}
.projects-portfolio .portfolio-intro{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 auto 2rem;color:var(--project-muted);font-size:1.4rem;line-height:1.6;}
.projects-portfolio .portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem;align-items:start;}
.project-card{min-width:0;overflow:hidden;background:var(--bgc-card);border:0;border-radius:2rem;box-shadow:var(--card-shadow);}
.project-card .project-cover{display:block;position:relative;width:100%;border:0;padding:0;aspect-ratio:16/10;background:var(--project-photo-bg);overflow:hidden;cursor:pointer;color:#fff;}
.project-card .project-cover>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.project-card .project-photo-count{position:absolute;top:1.6rem;right:1.6rem;padding:.7rem 1.1rem;border-radius:3rem;background:#111c22df;color:#fff;font-size:1.3rem;font-weight:600;}
.project-card .project-cover-hint{position:absolute;right:1.6rem;bottom:1.6rem;background:#111c22df;border:1px solid #ffffff66;padding:.8rem 1.1rem;border-radius:.8rem;color:#fff;font-size:1.3rem;}
.project-card .project-card-body{padding:2.4rem;}
.project-card .project-category{display:inline-block;font-size:1.25rem;font-weight:650;color:var(--color-text);background:var(--color-tertiary);border:0;border-radius:2rem;padding:.55rem 1rem;margin-bottom:1.3rem;}
.project-card h2{font-size:clamp(2.2rem,2.1vw,2.9rem);line-height:1.3;margin:0 0 1rem;color:var(--color-text);text-align:left;}
.project-card .project-location{font-size:1.35rem;line-height:1.5;color:var(--project-muted);margin-bottom:1rem;}
.project-card .project-summary{font-size:1.6rem;line-height:1.7;margin:0 0 1.7rem;color:var(--color-text);}
.project-card .project-gallery-action{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:4.8rem;padding:1.1rem 1.5rem;border:0;border-radius:.8rem;background:var(--color-primary);color:#fff;font-family:inherit;font-size:1.5rem;font-weight:650;text-align:left;cursor:pointer;}
.project-card .project-details{margin-top:1.6rem;border-top:1px solid var(--project-border);padding-top:.5rem;}
.project-card .project-details summary{padding:1rem 0;min-height:4.4rem;cursor:pointer;font-size:1.4rem;font-weight:600;color:var(--color-text);}
.project-card .project-details p{font-size:1.45rem;line-height:1.8;color:var(--project-muted);margin:.5rem 0 0;}
.projects-portfolio button:focus-visible,.projects-portfolio summary:focus-visible{outline:3px solid var(--color-primary);outline-offset:4px;}
.project-card .project-cover:focus-visible{outline-offset:-5px;}
/* Native dialog provides modal focus handling and Escape support. */
.project-gallery{--gallery-border:#dce2e6;position:fixed;inset:0;width:min(168rem,calc(100% - 3.2rem));height:calc(100dvh - 3.2rem);max-height:calc(100dvh - 3.2rem);max-width:none;margin:auto;padding:1.4rem;border:1px solid var(--gallery-border);border-radius:1.8rem;background:var(--bgc-card);color:var(--color-text);overflow:auto;font-family:inherit;}
.project-gallery[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;}
.project-gallery::backdrop{background:#091015d9;}
:root[data-theme="dark"] .project-gallery{--gallery-border:#374148;}
.project-gallery .gallery-header{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;margin-bottom:1rem;}
.project-gallery h2{font-size:clamp(1.8rem,2.2vw,2.6rem);line-height:1.35;color:var(--color-text);margin:0;}
.project-gallery button{min-width:4.4rem;min-height:4.4rem;border:1px solid var(--gallery-border);border-radius:.8rem;background:var(--bgc-card);color:var(--color-text);font-family:inherit;cursor:pointer;}
.project-gallery .gallery-close{flex-shrink:0;font-size:2.8rem;}
.project-gallery .gallery-frame{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;min-width:0;background:#11171c;border-radius:1rem;overflow:hidden;touch-action:pan-y;}
.project-gallery .gallery-frame img{display:block;width:100%;height:100%;object-fit:contain;}
.project-gallery .gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;}
.project-gallery .gallery-controls button{padding:.8rem 1.2rem;font-size:1.4rem;font-weight:600;}
.project-gallery .gallery-status{font-size:1.4rem;font-variant-numeric:tabular-nums;text-align:center;}
.project-gallery .gallery-thumbnails{display:flex;min-width:0;gap:.8rem;overflow-x:auto;padding:.3rem .3rem .6rem;scrollbar-width:thin;}
.project-gallery .gallery-thumb{flex:0 0 7.2rem;min-width:7.2rem;height:5.6rem;padding:2px;border:2px solid transparent;background:var(--bgc-body);overflow:hidden;}
.project-gallery .gallery-thumb[aria-current="true"]{border-color:var(--color-primary);}
.project-gallery .gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:.4rem;}
.project-gallery button:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;}
@media(max-width:760px){.projects-portfolio .portfolio-grid{grid-template-columns:minmax(0,1fr);}.projects-portfolio .portfolio-intro{align-items:flex-start;flex-direction:column;}.project-card .project-card-body{padding:2rem;}.project-gallery{padding:1rem;width:calc(100% - 1.6rem);height:calc(100dvh - 1.6rem);max-height:calc(100dvh - 1.6rem);}.project-gallery .gallery-header{gap:1rem;}.project-gallery .gallery-controls button{font-size:1.3rem;padding:.8rem;}.project-gallery .gallery-status{font-size:1.3rem;}}



.project-card .project-details{box-sizing:border-box;}

/* Highlight the card without changing its dimensions or position. */
@media(hover:hover) and (pointer:fine){
 .projects-portfolio .project-card,.projects-portfolio .project-card:hover{outline:1px solid transparent;outline-offset:-1px;transition:box-shadow var(--card-hover-duration) var(--card-hover-easing),outline-color var(--card-hover-duration) var(--card-hover-easing)!important;}
 .projects-portfolio .project-card:hover{outline-color:var(--color-primary);box-shadow:none;}
}
@media(prefers-reduced-motion:reduce){.projects-portfolio .project-card,.projects-portfolio .project-card:hover{transition:none!important;}}

/* Keep the main photograph dominant on short landscape screens. */
@media(max-height:500px){.project-gallery .gallery-thumbnails{display:none;}.project-gallery[open]{grid-template-rows:auto minmax(0,1fr) auto;}.project-gallery h2{font-size:1.7rem;}.project-gallery .gallery-header{margin-bottom:.6rem;}}