/* BednarzDesign portfolio — same dark/emerald design language as /view.php */
body.portfolio-page{background:#101311;color:#edf5ef;min-height:100vh;overflow-x:hidden}
.portfolio-page .bg-lights{pointer-events:none}
.portfolio-page .portfolio-main{width:min(1200px,100%);padding:clamp(122px,10vw,155px) 32px 85px;margin:auto;min-height:68vh;position:relative;z-index:1}
.portfolio-page .portfolio-screen{display:none;animation:portfolioReveal .35s ease both}
.portfolio-page .portfolio-screen.is-active{display:block}
@keyframes portfolioReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.portfolio-page .portfolio-hero{text-align:center;max-width:990px;margin:0 auto 77px;padding:0 8px}
.portfolio-page .portfolio-kicker{display:flex;align-items:center;justify-content:center;gap:11px;font-size:.72rem;letter-spacing:.22em;font-weight:700;line-height:1.6;color:#00c57d}
.portfolio-page .portfolio-pulse{display:inline-block;width:8px;height:8px;flex:0 0 8px;background:#00c57d;border-radius:50%;box-shadow:0 0 0 5px rgba(0,197,125,.13)}
.portfolio-page .portfolio-pulse.small{width:6px;height:6px;flex-basis:6px;box-shadow:0 0 0 4px rgba(0,197,125,.1)}
.portfolio-page .portfolio-hero h1{font-family:'Syne',sans-serif;color:#f5faf6;font-weight:800;letter-spacing:-.055em;line-height:1.05;font-size:clamp(2.9rem,6.6vw,6rem);margin:19px auto 20px;overflow-wrap:anywhere}
.portfolio-page .portfolio-hero h1>span{color:#00c57d}
.portfolio-page .portfolio-intro{font-size:clamp(.97rem,1.5vw,1.12rem);color:#abbcb1;line-height:1.85;max-width:665px;margin:0 auto 26px}
.portfolio-page .portfolio-meta-pill{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:15px;border:1px solid #2a4a37;background:rgba(0,197,125,.07);border-radius:999px;padding:12px 22px;margin:0 auto;color:#c0d8c8;font-size:.81rem;font-weight:600}
.portfolio-page .portfolio-meta-pill>span{display:inline-flex;align-items:center;gap:10px}
.portfolio-page .portfolio-meta-divider{height:15px;width:1px;background:rgba(146,193,161,.32);padding:0;display:block!important}
.portfolio-page #portfolio-total,.portfolio-page #project-image-count{color:#85eab2}
.portfolio-page .portfolio-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(123,163,140,.19);padding-bottom:22px;margin-bottom:28px}
.portfolio-page .portfolio-section-head .portfolio-kicker{justify-content:flex-start}
.portfolio-page .portfolio-section-head h2{color:#f4f9f5;font:800 clamp(1.9rem,3.6vw,2.9rem)/1.15 'Syne',sans-serif;letter-spacing:-.04em;margin:10px 0 0;text-align:left}
.portfolio-page .portfolio-section-head h2 span{color:#00c57d}
.portfolio-page .portfolio-section-count{color:#90d7ac;font-size:.72rem;letter-spacing:.13em;font-weight:700;white-space:nowrap;padding-bottom:7px}
/* Cards: art first, editorial framing underneath (matches client delivery gallery). */
.portfolio-page .work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.portfolio-page .work-card{min-width:0;display:block;width:100%;appearance:none;padding:0;margin:0;color:inherit;font:inherit;text-align:left;background:linear-gradient(165deg,#1b2520 0%,#141b17 100%);border:1px solid #294136;border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:0 12px 36px rgba(0,0,0,.17);transition:transform .2s,border-color .2s,box-shadow .2s}
.portfolio-page .work-card:hover,.portfolio-page .work-card:focus-visible{transform:translateY(-4px);border-color:rgba(0,197,125,.55);box-shadow:0 22px 42px rgba(0,0,0,.26)}
.portfolio-page .work-card-cover{width:100%;aspect-ratio:16/9;overflow:hidden;background:#162019;position:relative;display:flex;align-items:center;justify-content:center}
.portfolio-page .work-card-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.portfolio-page .work-card:hover .work-card-cover img{transform:scale(1.035)}
.portfolio-page .work-card-cover .work-card-badge{position:absolute;top:13px;left:13px;border:1px solid rgba(219,255,231,.22);border-radius:999px;background:rgba(9,19,13,.77);backdrop-filter:blur(9px);padding:7px 11px;color:#e6f7ec;font-size:.62rem;font-weight:700;letter-spacing:.07em}
.portfolio-page .work-card-placeholder{font:700 3.3rem 'Syne',sans-serif;color:#295d40}
.portfolio-page .work-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 19px;min-height:91px}
.portfolio-page .work-card-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.portfolio-page .work-card-copy small{font-size:.61rem;letter-spacing:.16em;font-weight:700;color:#8cba9d}
.portfolio-page .work-card-copy strong{font-size:.93rem;font-weight:700;color:#edf6ef;line-height:1.35;overflow-wrap:anywhere}
.portfolio-page .work-card-arrow{flex:0 0 39px;width:39px;height:39px;display:flex;align-items:center;justify-content:center;border:1px solid #355441;border-radius:12px;background:#1e3025;color:#bff5d5;font-size:1.25rem;transition:background .2s,border-color .2s}
.portfolio-page .work-card:hover .work-card-arrow{background:#244d36;border-color:#00c57d}
/* Detail hero and gallery */
.portfolio-page .portfolio-return-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 54px;min-height:48px}
.portfolio-page .portfolio-back{appearance:none;background:#18241d;border:1px solid #355641;border-radius:999px;color:#ccead8;padding:11px 18px;display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:45px;font:700 .81rem 'Montserrat',sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.portfolio-page .portfolio-back:hover{background:#253b2c;border-color:#00c57d;color:#fff}
.portfolio-page .portfolio-back span{font-size:1.15rem}
.portfolio-page .portfolio-breadcrumb{color:#789783;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-align:right;overflow-wrap:anywhere}
.portfolio-page .portfolio-detail-hero{margin-bottom:76px}
.portfolio-page .portfolio-detail-hero h1{font-size:clamp(2.8rem,5.8vw,5.35rem);max-width:1000px}
.portfolio-page .portfolio-detail-hero h1 #project-title{color:#f5faf6}
.portfolio-page .portfolio-detail-hero h1 .portfolio-green-dot{color:#00c57d}
.portfolio-page .work-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.portfolio-page .work-gallery-item{min-width:0;overflow:hidden;border-radius:20px;border:1px solid #294136;background:linear-gradient(165deg,#1b2520 0%,#141b17 100%);box-shadow:0 12px 36px rgba(0,0,0,.17);transition:transform .2s,border-color .2s,box-shadow .2s}
.portfolio-page .work-gallery-item:hover{transform:translateY(-4px);border-color:rgba(0,197,125,.5);box-shadow:0 22px 42px rgba(0,0,0,.26)}
.portfolio-page .work-gallery-preview{width:100%;position:relative;display:block;cursor:zoom-in;padding:0;margin:0;border:0;background:#162019;overflow:hidden;aspect-ratio:16/9}
.portfolio-page .work-gallery-preview img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s ease;border:0;border-radius:0}
.portfolio-page .work-gallery-preview:hover img{transform:scale(1.02)}
.portfolio-page .work-gallery-overlay{position:absolute;bottom:14px;right:14px;padding:9px 13px;color:#f6fff8;font-size:.75rem;font-weight:600;background:rgba(10,18,14,.78);border:1px solid rgba(221,255,235,.23);backdrop-filter:blur(10px);border-radius:999px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.portfolio-page .work-gallery-preview:hover .work-gallery-overlay,.portfolio-page .work-gallery-preview:focus-visible .work-gallery-overlay{opacity:1;transform:none}
.portfolio-page .work-gallery-footer{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:15px 19px}
.portfolio-page .work-gallery-footer-label{display:flex;flex-direction:column;gap:5px}
.portfolio-page .work-gallery-footer-label small{color:#8cba9d;letter-spacing:.17em;font-size:.63rem;font-weight:700}
.portfolio-page .work-gallery-footer-label strong{font-size:.86rem;font-weight:600;color:#e7f3ea}
.portfolio-page .work-gallery-footer-right{color:#bff5d5;font-size:.75rem;font-weight:700}
.portfolio-page .portfolio-empty{grid-column:1/-1;padding:50px 22px;text-align:center;color:#b8c9be;background:#17221b;border:1px dashed #38664c;border-radius:20px}
/* End-of-section contact panel */
.portfolio-page .portfolio-end-note{display:flex;align-items:center;gap:17px;margin:65px 0 0;padding:28px 30px;border:1px solid #2c4838;background:radial-gradient(ellipse at left,rgba(0,197,125,.10),transparent 65%),#18221c;border-radius:20px}
.portfolio-page .portfolio-end-symbol{flex:0 0 50px;width:50px;height:50px;border:1px solid #3c6a51;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#00e68a;font-size:1.45rem}
.portfolio-page .portfolio-end-note>div{min-width:0;flex:1}
.portfolio-page .portfolio-end-note strong{color:#eff9f2;font-size:1rem}
.portfolio-page .portfolio-end-note p{color:#9fb3a6;font-size:.84rem;line-height:1.7;margin:4px 0 0}
.portfolio-page .portfolio-pill-button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:47px;padding:11px 19px;border-radius:999px;background:#1b2c21;border:1px solid #41664c;color:#ddf9e9;font:700 .83rem 'Montserrat',sans-serif;white-space:nowrap;transition:background .2s,border-color .2s}
.portfolio-page .portfolio-pill-button:hover{background:#264532;border-color:#00c57d;color:#fff}
.portfolio-page .portfolio-pill-button span{color:#00e68a}
.portfolio-page .site-footer{position:relative;z-index:1}
.portfolio-page nav .nav-links a.upwork-link{border:2px solid #00c57d;border-radius:15px;padding:9px 15px;color:#eaf8ee;display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
.portfolio-page nav .nav-links a.upwork-link:hover{background:rgba(0,197,125,.14);border-color:#00e68a;color:#00e68a}
/* Larger isolated lightbox: 96vw on desktop, edge-to-edge on phones. */
body.portfolio-lightbox-open{overflow:hidden}
#lightbox.portfolio-lightbox[hidden]{display:none!important}
#lightbox.portfolio-lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:10000;padding:64px 15px 22px;background:rgba(4,9,6,.95);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px)}
#lightbox .portfolio-lightbox-top{position:fixed;z-index:3;top:13px;left:26px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:14px}
#lightbox .portfolio-lightbox-label{color:#77d9a8;letter-spacing:.19em;font-size:.64rem;font-weight:700}
#lightbox .portfolio-lightbox-label span{color:#558168}
#lightbox .portfolio-lightbox-tools{display:flex;align-items:center;gap:17px}
#lightbox #lightbox-counter{font-size:.76rem;color:#adcfb8;font-weight:700}
#lightbox .portfolio-lightbox-close{min-height:41px;padding:9px 15px;color:#f1fdf4;background:#21362a;border:1px solid #487459;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font:600 .83rem 'Montserrat',sans-serif;cursor:pointer}
#lightbox .portfolio-lightbox-close:hover{background:#2c5038}
#lightbox .portfolio-lightbox-stage{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;min-width:0}
#lightbox #lightbox-img{display:block;width:auto;height:auto;max-width:min(1550px,96vw);max-height:calc(100dvh - 95px);object-fit:contain;border:1px solid rgba(217,255,233,.16);border-radius:12px;box-shadow:0 26px 70px rgba(0,0,0,.6);transform:none;background:#101913;cursor:default}
#lightbox .portfolio-lightbox-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(25,46,33,.92);border:1px solid #41664c;border-radius:50%;color:#edf9f1;font-size:1.4rem;cursor:pointer}
#lightbox .portfolio-lightbox-arrow:hover{background:#315640}
#lightbox .portfolio-lightbox-prev{left:16px}
#lightbox .portfolio-lightbox-next{right:16px}
#lightbox .portfolio-lightbox-arrow[disabled]{opacity:.26;cursor:default}
#lightbox .portfolio-lightbox-hint{position:fixed;bottom:5px;font-size:.65rem;letter-spacing:.05em;color:#83a995;text-align:center}
@media(max-width:960px){.portfolio-page .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-page .portfolio-main{padding-left:24px;padding-right:24px}}
@media(max-width:680px){
 .portfolio-page .portfolio-main{padding:113px 16px 56px}
 .portfolio-page .portfolio-hero{margin-bottom:47px;padding:0 3px}
 .portfolio-page .portfolio-hero h1{font-size:clamp(2.7rem,9.7vw,3.65rem)}
 .portfolio-page .portfolio-kicker{font-size:.61rem;letter-spacing:.16em;gap:8px}
 .portfolio-page .portfolio-intro{font-size:.92rem;line-height:1.75;margin-bottom:19px}
 .portfolio-page .portfolio-meta-pill{padding:11px 13px;font-size:.72rem;gap:9px}
 .portfolio-page .portfolio-section-head{align-items:flex-end;gap:11px;padding-bottom:16px;margin-bottom:20px}
 .portfolio-page .portfolio-section-head h2{font-size:1.9rem}
 .portfolio-page .portfolio-section-count{font-size:.59rem;letter-spacing:.06em}
 .portfolio-page .work-grid,.portfolio-page .work-gallery-grid{grid-template-columns:1fr;gap:16px}
 .portfolio-page .work-card-bottom{min-height:85px}
 .portfolio-page .portfolio-return-row{margin-bottom:43px}
 .portfolio-page .portfolio-breadcrumb{font-size:.56rem;max-width:45%;letter-spacing:.07em}
 .portfolio-page .portfolio-detail-hero{margin-bottom:51px}
 .portfolio-page .work-gallery-overlay{opacity:1;transform:none;bottom:10px;right:10px;font-size:.68rem}
 .portfolio-page .portfolio-end-note{margin:42px 0 0;padding:20px;flex-wrap:wrap;gap:15px}
 .portfolio-page .portfolio-end-note .portfolio-pill-button{width:100%}
 #lightbox.portfolio-lightbox{padding:64px 4px 15px}
 #lightbox #lightbox-img{max-width:99vw;max-height:calc(100dvh - 87px)}
 #lightbox .portfolio-lightbox-top{left:12px;right:12px}
 #lightbox .portfolio-lightbox-label{font-size:.51rem;letter-spacing:.08em}
 #lightbox .portfolio-lightbox-close{padding:8px 11px}
 #lightbox .portfolio-lightbox-prev{left:5px}
 #lightbox .portfolio-lightbox-next{right:5px}
 #lightbox .portfolio-lightbox-arrow{width:34px;height:34px;font-size:1rem}
 #lightbox .portfolio-lightbox-hint{display:none}
 .portfolio-page nav .nav-links a.upwork-link{padding:6px 9px;font-size:.77rem;border-radius:11px}
}
@media(max-width:410px){
 .portfolio-page .portfolio-meta-pill{flex-direction:column;border-radius:18px;gap:6px}
 .portfolio-page .portfolio-meta-divider{display:none!important}
 .portfolio-page .portfolio-section-head h2{font-size:1.65rem}
 .portfolio-page .portfolio-breadcrumb{display:none}
}
@media(prefers-reduced-motion:reduce){.portfolio-page .portfolio-screen,.portfolio-page .work-card,.portfolio-page .work-card-cover img,.portfolio-page .work-gallery-item,.portfolio-page .work-gallery-preview img{animation:none;transition:none}}

/* 2026 compact artwork-first layout — no file counts, no thumbnail labels */
.portfolio-page .portfolio-main{padding:111px 30px 72px}
.portfolio-page .portfolio-hero{max-width:1040px;margin:0 auto 23px;padding:0;text-align:center}
.portfolio-page .portfolio-hero h1{font-size:clamp(2.25rem,4.5vw,4.1rem);line-height:1.07;margin:9px auto 9px;letter-spacing:-.045em}
.portfolio-page .portfolio-intro{font-size:clamp(.84rem,1.08vw,.95rem);line-height:1.55;margin:0 auto;max-width:680px}
.portfolio-page .portfolio-kicker{font-size:.62rem;letter-spacing:.16em}
.portfolio-page .work-grid{gap:16px}
.portfolio-page .work-card{border-radius:17px}
.portfolio-page .work-card-bottom{min-height:60px;padding:13px 16px}
.portfolio-page .work-card-copy strong{font-size:.9rem}
.portfolio-page .work-card-arrow{height:32px;width:32px;flex-basis:32px;border-radius:9px}
.portfolio-page .portfolio-return-row{margin:0 0 10px;min-height:40px}
.portfolio-page .portfolio-back{min-height:38px;padding:8px 13px;font-size:.72rem}
.portfolio-page .portfolio-breadcrumb{font-size:.57rem;max-width:47%}
.portfolio-page .portfolio-detail-hero{margin-bottom:23px}
.portfolio-page .portfolio-detail-hero h1{font-size:clamp(2rem,3.4vw,3.25rem);max-width:1100px;margin:8px auto 10px;overflow-wrap:normal;word-break:normal}
.portfolio-page .work-gallery-grid{gap:16px}
.portfolio-page .work-gallery-item{border-radius:16px}
.portfolio-page .work-gallery-preview{display:block}
.portfolio-page .work-gallery-overlay{opacity:0;pointer-events:none}
.portfolio-page .portfolio-end-note{margin-top:38px}
@media(max-width:680px){
 .portfolio-page .portfolio-main{padding:91px 14px 52px}
 .portfolio-page .portfolio-hero{margin-bottom:16px}
 .portfolio-page .portfolio-hero h1{font-size:clamp(2.2rem,8vw,3rem);margin:8px auto 8px}
 .portfolio-page .portfolio-intro{font-size:.79rem;line-height:1.48}
 .portfolio-page .portfolio-kicker{font-size:.52rem;letter-spacing:.11em}
 .portfolio-page .work-grid,.portfolio-page .work-gallery-grid{gap:12px}
 .portfolio-page .work-card-bottom{min-height:52px;padding:10px 14px}
 .portfolio-page .portfolio-return-row{min-height:35px;margin:0 0 11px}
 .portfolio-page .portfolio-back{min-height:34px;padding:7px 12px;font-size:.67rem}
 .portfolio-page .portfolio-detail-hero{margin-bottom:15px}
 .portfolio-page .portfolio-detail-hero h1{font-size:clamp(1.85rem,6.8vw,2.55rem);line-height:1.12;margin:7px auto}
 .portfolio-page .portfolio-detail-hero .portfolio-intro{font-size:.79rem;line-height:1.46}
 .portfolio-page .work-gallery-preview{aspect-ratio:16/9}
 .portfolio-page .portfolio-breadcrumb{display:none}
}
/* Descriptions never push the actual work below the first viewport. */
.portfolio-page .portfolio-detail-hero .portfolio-intro{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:850px}
@media(max-width:680px){.portfolio-page nav .nav-links a.uploadbtn{display:inline-flex!important}.portfolio-page nav .nav-links{gap:10px}.portfolio-page .portfolio-detail-hero .portfolio-intro{-webkit-line-clamp:2;max-width:355px}}
@media(max-width:395px){.portfolio-page nav .logo img{width:99px}.portfolio-page nav .nav-links{gap:8px}.portfolio-page nav .nav-links a{font-size:.69rem}.portfolio-page nav .nav-links a.upwork-link{font-size:.69rem;padding:5px 7px}}