.portfolio-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-areas:"media description" "thumbs description";gap:20px 28px;align-items:start;position:relative}
.portfolio-layout>*{min-width:0}
.portfolio-media{grid-area:media}
.portfolio-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.portfolio-controls button{min-height:44px;border:1px solid #344256;border-radius:10px;background:#121c2a;color:inherit;font:inherit;cursor:pointer;padding:8px 14px}
.portfolio-controls #prev,.portfolio-controls #next{font-size:28px;line-height:1;min-width:44px}
.portfolio-controls #portfolio-auto{margin-left:auto;font-size:14px}
.portfolio-controls #portfolio-auto[aria-pressed="true"]{border-color:var(--teal,#159e98)}
.portfolio-controls button:disabled{opacity:.45;cursor:default}
.portfolio-layout button:focus-visible,.portfolio-layout a:focus-visible{outline:3px solid #8dbbff;outline-offset:3px}
.portfolio-status{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.portfolio-photo-button{display:block;width:fit-content;max-width:100%;margin:12px auto 0;padding:0;border:1px solid #263448;border-radius:16px;overflow:hidden;background:transparent;cursor:zoom-in}
.portfolio-photo-button[hidden]{display:none}
.portfolio-view #slide{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(120px,calc(100svh - var(--portfolio-header-height,100px) - 90px),800px);object-fit:contain;border-radius:0;background:transparent}
.portfolio-description{grid-area:description;padding:24px;border:1px solid #263448;border-radius:16px;background:#101722;overflow-wrap:anywhere}
.portfolio-description h3{margin:0 0 16px;font-size:clamp(20px,2vw,28px);line-height:1.3}
.portfolio-description p{line-height:1.65}
.portfolio-description .portfolio-category{font-size:14px;color:#86d8cc;margin:0 0 16px}
.portfolio-description .portfolio-text{white-space:pre-line;margin:0 0 20px}
.portfolio-description .portfolio-work-link{margin-top:16px;max-width:100%;white-space:normal;text-align:center}
.portfolio-description [hidden]{display:none}
.portfolio-formatted{line-height:1.65}
.portfolio-formatted p{margin:0 0 16px}
.portfolio-formatted h2,.portfolio-formatted h3{font-size:22px;line-height:1.35;margin:24px 0 12px}
.portfolio-formatted h3{font-size:19px}
.portfolio-formatted ul,.portfolio-formatted ol{padding-left:24px;margin:12px 0 20px}
.portfolio-formatted li{margin:6px 0}
.portfolio-formatted a{color:#9fc6ff;text-decoration:underline;text-underline-offset:3px}
.portfolio-formatted blockquote{margin:16px 0;padding-left:16px;border-left:3px solid #86d8cc}
.portfolio-formatted code{white-space:pre-wrap}
.portfolio-layout #thumbs{grid-area:thumbs;display:flex;position:relative;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;max-width:100%;margin:0;padding:4px 3px 12px;scrollbar-width:thin}
.portfolio-thumbs button{flex:0 0 104px;padding:3px;border:2px solid transparent;background:#101722;border-radius:10px;cursor:pointer}
.portfolio-view #thumbs img{display:block;width:94px;height:80px;object-fit:contain;border-radius:6px}
.portfolio-thumbs button.active{border-color:#6ba6ff}
.portfolio-layout dialog{max-width:95vw;max-height:95vh;padding:16px;border:1px solid #344256;border-radius:16px;background:#101722;color:#edf2ff}
.portfolio-layout dialog::backdrop{background:rgb(0 0 0 / .8)}
.portfolio-lightbox-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px;overflow-wrap:anywhere}
.portfolio-layout #portfolio-lightbox-image{display:block;max-width:100%;max-height:75vh;width:auto;height:auto;object-fit:contain;margin:auto}
.portfolio-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){
 .portfolio-view #slide{max-height:clamp(120px,calc(100svh - var(--portfolio-header-height,100px) - 70px),640px)}
 .portfolio-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "description" "thumbs";gap:18px}
 .portfolio-description{padding:20px}
 .portfolio-controls{gap:6px}
 .portfolio-controls #portfolio-auto{padding:8px 10px;font-size:13px}
 .portfolio-lightbox-toolbar{gap:10px;font-size:14px}
}
.portfolio-view{padding-block:28px}
.portfolio-view>h2{margin:0 0 20px}