.portfolio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 28px}
.portfolio-item{min-width:0}
.portfolio-link{display:block}
.portfolio-preview{aspect-ratio:2/1;overflow:hidden;border:1px solid var(--line)}
.portfolio-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.portfolio-caption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:15px}
.portfolio-caption>div{min-width:0}
.portfolio-caption h3{font-size:23px;line-height:1.3;letter-spacing:-.025em}
.portfolio-caption p{font-size:13px;line-height:1.6;margin-top:5px}
.portfolio-open{font-size:12px;white-space:nowrap;text-decoration:underline;text-underline-offset:5px}
.portfolio-more{margin-top:35px}
.portfolio-more>summary{display:flex;justify-content:center;align-items:center;gap:18px;list-style:none;border-block:1px solid var(--line);padding:20px 12px;font-size:16px;font-weight:650;cursor:pointer;min-height:60px;text-align:center}
.portfolio-more>summary::-webkit-details-marker{display:none}
.portfolio-more>summary::marker{content:''}
.portfolio-more[open] .when-closed{display:none}
.portfolio-more[open] .when-open{display:inline}
.portfolio-more[open]>summary .disclosure-mark::after{display:none}
.portfolio-more>.portfolio-grid{padding-top:30px}
#project-dialog{width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:0;background:var(--paper);overscroll-behavior:contain}
#project-dialog .dialog-head{position:sticky;top:0;z-index:3;background:var(--paper);padding:18px 26px;border-bottom:1px solid var(--line)}
#project-dialog .dialog-head h3{font-size:25px;line-height:1.3}
#project-dialog .dialog-close{flex:none;width:44px;height:44px}
.project-dialog-body{padding:0 26px 26px}
#project-description{font-size:15px;line-height:1.6;margin-top:18px}
.project-views{display:flex;gap:24px;flex-wrap:wrap;margin-top:15px;border-bottom:1px solid var(--line)}
.project-views button{border:0;border-bottom:2px solid transparent;background:none;font-size:14px;padding:12px 0;min-height:44px;font-weight:650}
.project-views button[aria-pressed=true]{border-bottom-color:var(--ink);font-weight:800}
.project-original{display:inline-block;font-size:12px;line-height:1.6;text-decoration:underline;text-underline-offset:3px;padding-block:10px;margin-top:5px}
#project-dialog .dialog-note{font-size:11px;margin-top:0}
#project-media{margin-top:20px}
#project-image{width:100%;height:auto;border:0;border-radius:0;margin:0}
@media(max-width:1000px){.portfolio-caption{display:block}.portfolio-open{display:inline-block;margin-top:9px}.portfolio-caption h3{font-size:21px}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr;gap:28px}.portfolio-preview{aspect-ratio:1.65/1}.portfolio-caption{display:flex;flex-wrap:wrap;gap:8px 15px;padding-top:13px}.portfolio-caption h3{font-size:23px}.portfolio-caption p{font-size:13px}.portfolio-open{margin-top:0}.portfolio-more{margin-top:28px}.portfolio-more>summary{font-size:14px;justify-content:space-between;padding:17px 0;text-align:left;gap:15px}.portfolio-more>.portfolio-grid{padding-top:26px}#project-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}#project-dialog .dialog-head{padding:12px 16px;gap:10px}#project-dialog .dialog-head h3{font-size:20px}.project-dialog-body{padding:0 16px 16px}.project-views{gap:8px 18px}.project-views button{font-size:12px}#project-description{font-size:14px}.project-original{font-size:11px}.project-views{flex-wrap:nowrap}.project-views button{flex:1;text-align:left}#project-media{margin-top:15px}}
