.portfolio-main{padding-top:70px;padding-bottom:65px}
.portfolio-heading{margin-bottom:42px}
.portfolio-heading h1{font-size:clamp(52px,7.5vw,96px);letter-spacing:-4px;line-height:1.08;margin:15px 0 25px}
.portfolio-heading h1>span{color:#b99a00}
.portfolio-intro{display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:15px;line-height:1.6}
.portfolio-intro .gallery-hint{font-size:12px}
.gallery-hint>span{display:inline-block;margin-left:5px;color:var(--ink)}
.thumbnail-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.gallery-card{margin:0;min-width:0}
.gallery-image{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;background:#e2e6dc;border-radius:12px;cursor:zoom-in}
.gallery-image>img{width:100%;height:100%;object-fit:contain;transition:transform .3s}
.gallery-image:hover>img{transform:scale(1.025)}
.gallery-expand{position:absolute;bottom:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;background:var(--paper);border-radius:50%;box-shadow:0 2px 14px #0002;transition:background .2s,transform .2s}
.gallery-expand .icon{width:19px;height:19px}
.gallery-image:hover .gallery-expand{background:var(--yellow);transform:translateY(-2px)}
.gallery-card figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 2px 0;font-weight:550;font-size:15px;line-height:1.4}
.gallery-number{color:#85897f;font-size:11px;font-weight:400;font-variant-numeric:tabular-nums}
.portfolio-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:30px;margin-top:55px}
.thumbnail-viewer{width:min(1120px,calc(100% - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:18px;border:1px solid #43473f;border-radius:15px;background:#20231f;color:#f7f7f2;overflow:auto;box-shadow:0 24px 90px #0006}
.thumbnail-viewer::backdrop{background:#151813db;backdrop-filter:blur(5px)}
body:has(.thumbnail-viewer[open]){overflow:hidden}
.viewer-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:15px;padding-left:5px}
.viewer-top h2{font-family:var(--font);font-size:17px;letter-spacing:0;font-weight:550;line-height:1.4}
.viewer-close,.viewer-pagination button{display:grid;place-items:center;border:1px solid #55594f;background:transparent;color:inherit;border-radius:50%;width:44px;height:44px;flex-shrink:0}
.viewer-close{font-size:30px;line-height:1}
.viewer-close:hover,.viewer-pagination button:hover{background:#404639}
.viewer-image{width:100%;max-height:calc(100dvh - 215px);height:auto;object-fit:contain;border-radius:6px;background:#111}
.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;padding-inline:5px}
.viewer-pagination{display:flex;align-items:center;gap:18px}
.viewer-pagination button{font-size:22px}
.viewer-count{font-size:12px;font-variant-numeric:tabular-nums;min-width:35px;text-align:center;color:#c5cbbd}
.viewer-video{font-size:12px}
@media(max-width:800px){.portfolio-main{padding-top:48px}.portfolio-heading{margin-bottom:30px}.portfolio-heading h1{letter-spacing:-2.5px}.portfolio-intro{align-items:flex-start;flex-direction:column;gap:12px}.thumbnail-gallery{gap:30px 20px}.gallery-card figcaption{font-size:13px}.gallery-expand{bottom:10px;right:10px;width:34px;height:34px}}
@media(max-width:600px){.portfolio-main{padding-top:40px;padding-bottom:40px}.portfolio-heading h1{font-size:clamp(46px,12.5vw,68px);margin-block:14px 17px}.portfolio-intro{font-size:14px}.portfolio-intro .gallery-hint{font-size:11px}.thumbnail-gallery{grid-template-columns:1fr;gap:28px}.gallery-card figcaption{font-size:14px;padding-top:12px}.portfolio-bottom{margin-top:37px;padding-top:24px}.portfolio-bottom .text-link{font-size:12px}.thumbnail-viewer{width:calc(100% - 20px);max-height:calc(100dvh - 24px);padding:12px;border-radius:12px}.viewer-top{gap:12px;padding-left:2px;margin-bottom:12px}.viewer-top h2{font-size:14px}.viewer-bottom{gap:12px;padding:0;margin-top:12px}.viewer-pagination{gap:8px}.viewer-video{font-size:11px}.viewer-video .icon{width:15px}.viewer-image{max-height:calc(100dvh - 190px)}}
