/* yuhakweb.com portfolio: eight genuine live-site captures, 2026-11-07 */
.portfolio-showcase{padding:86px 0 94px;background:#f8faf6}
.portfolio-showcase-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.48fr) auto;align-items:end;gap:34px;margin-bottom:35px}
.portfolio-showcase-heading h2{font-size:clamp(34px,4.6vw,58px);line-height:1.22;letter-spacing:-.055em;margin:0}
.portfolio-showcase-heading>p{font-size:14px;line-height:1.85;color:#61766a;margin:0 0 5px}
.portfolio-project-count{display:flex;align-items:end;flex-direction:column;gap:2px;border-left:1px solid #d5e3d5;padding-left:28px}
.portfolio-project-count strong{font-size:65px;line-height:1;letter-spacing:-.08em;color:#255a3e}
.portfolio-project-count span{font-size:10px;font-weight:850;color:#638a6e;letter-spacing:.14em}
.portfolio-site-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.portfolio-site{border:1px solid #dae5da;border-radius:12px;background:#fff;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:border-color .2s,box-shadow .2s}
.portfolio-site:hover{border-color:#93b59b;box-shadow:0 14px 34px #173a1b13}
.portfolio-browser{background:#e9efec;border-bottom:1px solid #dfe8df}
.portfolio-browser-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:#708274;background:#f2f6f1;gap:10px;font-size:11px;letter-spacing:.01em}
.portfolio-browser-dots{display:inline-flex;align-items:center;gap:5px}
.portfolio-browser-dots i{width:7px;height:7px;border-radius:50%;background:#b5c6b5}
.portfolio-browser-dots i:first-child{background:#89a88c}
.portfolio-browser-open{font-size:15px;color:#42674d;font-weight:800}
.portfolio-browser>a{display:block;aspect-ratio:16/10;overflow:hidden;background:#e3ebe3}
.portfolio-browser img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .4s}
.portfolio-browser>a:hover img{transform:scale(1.025)}
.portfolio-browser>a:focus-visible{outline:4px solid #2f7950;outline-offset:-4px}
.portfolio-site-body{padding:25px 26px 24px;display:flex;flex-direction:column;flex:1}
.portfolio-site-meta{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#608371;font-size:11px;font-weight:850;letter-spacing:.055em}
.portfolio-site-meta span:last-child{color:#94a59b;font-size:10px}
.portfolio-site h3{font-size:clamp(24px,2.5vw,31px);font-weight:750;letter-spacing:-.05em;line-height:1.33;margin:13px 0 9px}
.portfolio-site-body>p{font-size:14px;color:#62766b;line-height:1.8;margin:0 0 20px}
.portfolio-site-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:12px;padding-top:16px;border-top:1px solid #ecf0eb}
.portfolio-site-tags{display:flex;flex-wrap:wrap;gap:6px}
.portfolio-site-tags span{font-size:11px;color:#52765f;background:#eef4ea;padding:5px 9px;border-radius:5px;white-space:nowrap}
.portfolio-site-bottom>a{flex:0 0 auto;color:#1c5839;font-size:13px;font-weight:850;white-space:nowrap}
.portfolio-site-bottom>a:hover{text-decoration:underline;text-underline-offset:4px}
.portfolio-site-bottom>a span{font-size:17px;margin-left:7px}
.portfolio-last{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:26px;padding:30px 34px;background:#19372d;color:#f2f7ef;border-radius:11px}
.portfolio-last>div>span{font-size:10px;font-weight:820;letter-spacing:.12em;color:#bad99b}
.portfolio-last h3{font-size:clamp(24px,2.6vw,32px);margin:8px 0 6px;line-height:1.35}
.portfolio-last p{font-size:12px;margin:0;color:#bfcebf;line-height:1.8}
.portfolio-last>a{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:49px;padding:13px 17px;border-radius:7px;background:#d2f2a4;color:#21422d;font-size:13px;font-weight:800;white-space:nowrap}
.portfolio-last>a:hover{background:#edffcf}
.portfolio-experience{padding:70px 0 90px;background:#f8faf6}
.portfolio-experience-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:25px}
.portfolio-experience-heading h2{font-size:clamp(29px,3.5vw,43px);margin:0}
.portfolio-experience .case-milestones{margin-bottom:10px}
.portfolio-experience .evidence-caption{margin:0;color:#6e8773}
@media(max-width:1100px){.portfolio-showcase-heading{grid-template-columns:minmax(0,1fr) minmax(180px,.52fr);gap:18px}.portfolio-project-count{grid-column:1/-1;display:none}.portfolio-site-grid{gap:14px}.portfolio-site-body{padding:21px}.portfolio-site-bottom{align-items:start;flex-direction:column;gap:13px}}
@media(max-width:800px){.portfolio-showcase{padding:65px 0 75px}.portfolio-showcase-heading{display:flex;flex-direction:column;align-items:start;gap:10px;margin-bottom:23px}.portfolio-showcase-heading>p{max-width:650px}.portfolio-site-grid{grid-template-columns:1fr 1fr;gap:12px}.portfolio-site-body{padding:18px}.portfolio-site h3{font-size:23px}.portfolio-site-body>p{font-size:13px}.portfolio-last{padding:26px;align-items:start;flex-direction:column;gap:20px}.portfolio-last>a{width:100%}}
@media(max-width:560px){.portfolio-showcase{padding:50px 0 60px}.portfolio-showcase-heading h2{font-size:36px}.portfolio-showcase-heading>p{font-size:12px}.portfolio-site-grid{grid-template-columns:1fr;gap:15px}.portfolio-browser-bar{padding:9px 12px;font-size:10px}.portfolio-site-body{padding:20px}.portfolio-site h3{font-size:25px}.portfolio-site-body>p{font-size:13px}.portfolio-site-bottom{align-items:center;flex-direction:row}.portfolio-site-tags span{font-size:10px}.portfolio-site-bottom>a{font-size:12px}.portfolio-last{margin-top:21px;padding:24px 21px}.portfolio-last h3{font-size:23px}.portfolio-last p{font-size:12px}.portfolio-experience{padding:50px 0 65px}.portfolio-experience-heading{flex-direction:column;align-items:start;gap:2px}}
@media(max-width:360px){.portfolio-site-bottom{align-items:start;flex-direction:column}.portfolio-site-body{padding:17px}.portfolio-showcase-heading h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){.portfolio-site,.portfolio-browser img{transition:none}}