@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;800&display=swap');

:root { --black:#000; --white:#fff; --ink:var(--black); --paper:#e8e9ea; --muted:#6f7276; --accent:#e47212; --line:rgba(0,0,0,.2); }
* { box-sizing:border-box; }
html,body { min-height:100%; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:Montserrat,Arial,sans-serif; font-weight:300; }
button,a { font:inherit; color:inherit; }
a { text-decoration:none; }
button { cursor:pointer; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:20; padding:.8rem 1rem; background:var(--ink); color:var(--white); }
.skip-link:focus { top:1rem; }
.hero { position:relative; height:100svh; min-height:520px; overflow:hidden; background:var(--paper); }
.hero-brush,.hero-person { position:absolute; display:block; height:auto; }
.hero-brush { z-index:0; top:8%; right:24%; width:min(31vw,590px); clip-path:inset(0 0 0 40%); transform:rotate(-3deg); }
.hero-person { z-index:1; top:9%; right:24%; height:min(84vh,980px); }
.hero-figure { position:absolute; z-index:1; top:4%; right:3.5%; display:block; height:min(93vh,1080px); width:auto; }
.hero-figure--mobile { display:none; }
.hero-navigation { position:absolute; z-index:2; top:clamp(22px,7vh,120px); left:50%; display:flex; gap:22px; padding:6px 0; transform:translateX(-50%); white-space:nowrap; }
.hero-navigation:after { content:""; position:absolute; top:calc(100% + 8px); left:50%; width:min(29vw,560px); border-top:3px solid var(--accent); transform:translateX(-50%); }
.hero-navigation a { padding:6px 0; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.hero-navigation a:hover,.hero-navigation a:focus-visible { color:var(--ink); }
.hero-copy { position:absolute; z-index:2; top:44%; left:25.5%; width:min(30vw,840px); }
.hero-first-name,.hero-role,.hero-about p { margin:0; }
.hero-first-name { color:var(--accent); font-size:clamp(22px,2.35vw,60px); font-weight:800; line-height:1; }
.hero-copy h1 { margin:2px 0 5px; color:var(--accent); font-size:clamp(43px,5.05vw,138px); font-weight:800; letter-spacing:-.07em; line-height:.88; text-transform:uppercase; }
.hero-role { font-size:clamp(12px,1.25vw,34px); font-weight:800; letter-spacing:.24em; text-transform:uppercase; }
.hero-copy-rule { display:block; width:34%; margin:clamp(10px,1.1vw,25px) 0; border-top:4px solid var(--accent); }
.hero-about { max-width:92%; }
.hero-about-label { margin-bottom:6px !important; color:var(--accent); font-size:clamp(11px,.95vw,23px); font-weight:800; }
.hero-about p:last-child { font-size:clamp(11px,.9vw,22px); font-weight:500; line-height:1.25; }
.hero-buttons { display:flex; gap:clamp(12px,1.3vw,30px); margin-top:clamp(25px,3.2vw,70px); }
.hero-button { display:inline-flex; align-items:center; justify-content:center; min-height:clamp(38px,3.25vw,76px); padding:0 clamp(18px,1.8vw,42px); border:3px solid var(--accent); border-radius:10px; color:var(--accent); font-size:clamp(11px,1vw,24px); font-weight:800; letter-spacing:.04em; text-transform:uppercase; transition:background .2s,color .2s,transform .2s; }
.hero-button--primary { background:var(--accent); color:var(--white); }
.hero-button:hover,.hero-button:focus-visible { background:var(--ink); border-color:var(--ink); color:var(--white); transform:translateY(-3px); }
.hero-scroll { position:absolute; z-index:2; left:50%; bottom:clamp(16px,2.5vh,36px); display:grid; place-items:center; width:60px; height:60px; color:var(--accent); font-size:54px; font-weight:300; line-height:1; transform:translateX(-50%); transition:transform .2s,color .2s; }
.hero-scroll:hover,.hero-scroll:focus-visible { color:var(--ink); transform:translateX(-50%) translateY(-3px); }
.project-categories { padding:clamp(56px,8vw,112px) 3vw clamp(32px,4vw,56px); background:var(--paper); }
.about-section { min-height:50svh; padding:clamp(56px,8vw,112px) 3vw; background:var(--paper); }
.contact-section { min-height:0; padding:clamp(56px,8vw,112px) 3vw 0; }
.contact-section .categories-inner { padding:0 0 clamp(56px,8vw,112px); }
.contact-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,1.2fr); align-items:stretch; gap:clamp(40px,7vw,110px); }
.contact-copy { max-width:510px; }
.contact-copy h3 { margin:0 0 8px; font-size:clamp(25px,2.35vw,38px); font-weight:500; letter-spacing:-.04em; line-height:1.08; }
.contact-copy h3 span { color:var(--accent); }
.contact-copy > p { max-width:420px; margin:0 0 12px; font-size:clamp(12px,1vw,16px); font-weight:500; line-height:1.3; }
.contact-details { display:grid; gap:14px; margin-top:clamp(28px,3vw,46px); }
.contact-details a { display:inline-flex; align-items:center; width:max-content; max-width:100%; gap:16px; font-size:clamp(12px,.95vw,15px); font-weight:500; transition:color .2s,transform .2s; }
.contact-details a:hover,.contact-details a:focus-visible { color:var(--accent); transform:translateX(4px); }
.contact-detail-icon { display:grid; flex:0 0 auto; place-items:center; width:40px; height:40px; border-radius:3px; background:var(--accent); color:var(--white); }
.contact-detail-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.contact-detail-icon--linkedin { font-size:20px; font-weight:800; letter-spacing:-.07em; line-height:1; }
.contact-portrait { display:block; width:100%; height:100%; min-height:0; object-fit:cover; border-radius:clamp(12px,1.4vw,22px); box-shadow:0 16px 35px rgba(0,0,0,.14); }
.contact-panel { width:100vw; margin-top:clamp(24px,3vw,46px); margin-left:calc(50% - 50vw); padding:clamp(46px,6vw,90px) 3vw; background:var(--accent); }
.contact-panel-inner { display:grid; grid-template-columns:clamp(95px,12vw,180px) minmax(0,1fr) minmax(230px,.85fr); align-items:center; width:min(100%,1120px); margin:0 auto; gap:clamp(24px,4vw,68px); }
.contact-panel-icon { width:100%; max-width:170px; fill:none; stroke:var(--ink); stroke-linecap:round; stroke-linejoin:round; stroke-width:4; }
.contact-panel-copy h3 { margin:0 0 7px; font-size:clamp(24px,2.35vw,38px); font-weight:800; letter-spacing:-.04em; line-height:1; }
.contact-panel-copy p { margin:0; font-size:clamp(11px,1vw,16px); font-weight:500; line-height:1.25; }
.contact-actions { display:grid; gap:14px; }
.contact-action { display:grid; place-items:center; min-height:clamp(42px,3.5vw,58px); border:3px solid var(--paper); border-radius:10px; color:var(--paper); font-size:clamp(12px,1.1vw,18px); font-weight:800; letter-spacing:.02em; text-transform:uppercase; transition:background .2s,color .2s,transform .2s; }
.contact-action--message { background:var(--paper); color:var(--accent); }
.contact-action:hover,.contact-action:focus-visible { background:var(--ink); border-color:var(--ink); color:var(--white); transform:translateY(-3px); }
#about { padding-bottom:clamp(32px,4vw,56px); }
#tools { min-height:0; padding-top:clamp(32px,4vw,56px); }
.tools-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:clamp(12px,1.5vw,22px); }
.tool-card { position:relative; z-index:0; aspect-ratio:1; }
.tool-card:hover { z-index:2; }
.tool-crop { position:absolute; inset:0; display:block; overflow:hidden; border-radius:clamp(10px,1.2vw,20px); }
.tool-crop img { position:absolute; top:0; left:calc(-1 * var(--tool-x)); display:block; width:781.57%; max-width:none; height:100%; }
.tool-skill { position:absolute; z-index:1; bottom:calc(100% + 10px); left:50%; display:flex; align-items:center; justify-content:center; width:210%; height:31%; min-height:27px; gap:8%; border-radius:clamp(8px,.9vw,15px); background:var(--accent); box-shadow:0 10px 22px rgba(0,0,0,.12); opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:opacity .2s ease,transform .2s ease; }
.tool-skill i { display:block; height:46%; aspect-ratio:1; border:2px solid var(--paper); border-radius:50%; background:transparent; }
.tool-card[data-skill="2"] .tool-skill i:nth-child(-n+2),.tool-card[data-skill="3"] .tool-skill i:nth-child(-n+3),.tool-card[data-skill="4"] .tool-skill i:nth-child(-n+4),.tool-card[data-skill="5"] .tool-skill i:nth-child(-n+5),.tool-card[data-skill="6"] .tool-skill i:nth-child(-n+6) { background:var(--paper); }
.tool-card:hover .tool-skill { opacity:1; transform:translate(-50%,0); }
.about-intro { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr); align-items:stretch; gap:clamp(36px,6vw,96px); }
.about-copy { max-width:650px; }
.about-copy h3 { margin:0 0 16px; font-size:clamp(25px,2.4vw,38px); font-weight:500; letter-spacing:-.04em; line-height:1.05; }
.about-copy h3 span { color:var(--accent); }
.about-copy p { margin:0 0 14px; font-size:clamp(12px,1vw,16px); font-weight:500; line-height:1.35; }
.about-copy strong { font-weight:800; }
.about-portrait { display:block; width:100%; height:100%; min-height:0; object-fit:cover; border-radius:clamp(12px,1.4vw,22px); box-shadow:0 16px 35px rgba(0,0,0,.14); }
.about-stats { display:grid; grid-template-columns:repeat(4,1fr); margin:clamp(64px,8vw,110px) 0 clamp(56px,7vw,96px); }
.about-stat { min-width:0; padding:0 clamp(18px,2.2vw,40px); }
.about-stat + .about-stat { border-left:3px solid var(--accent); }
.about-stat:first-child { padding-left:0; }
.about-stat:last-child { padding-right:0; }
.about-stat-icon { display:block; width:58px; height:58px; margin:0 0 21px; object-fit:contain; }
.about-stat-value { margin:0 0 3px; font-size:clamp(34px,3.6vw,58px); font-weight:800; letter-spacing:-.07em; line-height:.9; }
.about-stat h3 { min-height:44px; margin:0 0 9px; font-size:clamp(15px,1.35vw,21px); font-weight:800; letter-spacing:-.035em; line-height:1.03; }
.about-stat > p:last-child { margin:0; font-size:clamp(10px,.82vw,13px); font-weight:500; line-height:1.28; }
.about-gallery { display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; gap:clamp(14px,2vw,28px); }
.about-gallery-item { position:relative; display:block; width:100%; min-width:0; padding:0; overflow:hidden; border:0; border-radius:clamp(12px,1.4vw,22px); background:transparent; box-shadow:0 14px 30px rgba(0,0,0,.12); cursor:zoom-in; }
.about-gallery-item img { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; transition:transform .25s ease; }
.about-gallery-item:after { content:'Powiększ ↗'; position:absolute; top:10px; right:10px; padding:6px 8px; border-radius:20px; background:var(--accent); color:var(--white); font-size:8px; font-weight:800; letter-spacing:.05em; opacity:0; transform:translateY(-4px); transition:opacity .2s,transform .2s; }
.about-gallery-item:hover img,.about-gallery-item:focus-visible img { transform:scale(1.035); }
.about-gallery-item:hover:after,.about-gallery-item:focus-visible:after { opacity:1; transform:none; }
.about-gallery-item:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.about-gallery > .about-gallery-item { height:100%; min-height:clamp(360px,36vw,560px); }
.about-gallery-stack { display:grid; grid-template-rows:1fr 1fr; gap:clamp(14px,2vw,28px); min-height:clamp(360px,36vw,560px); }
.about-gallery-stack .about-gallery-item { height:100%; min-height:0; }
.categories-inner { width:min(100%,1120px); margin:0 auto; }
.categories-heading { margin:0 0 clamp(28px,4vw,52px); }
.categories-heading h2 { margin:0; font-size:clamp(28px,4vw,54px); font-weight:800; letter-spacing:-.045em; }
.categories-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,30px); }
.category-card { position:relative; display:block; overflow:hidden; aspect-ratio:1; border-radius:clamp(16px,1.8vw,28px); background:var(--paper); box-shadow:0 16px 35px rgba(0,0,0,.14); transition:transform .25s ease,box-shadow .25s ease; }
.category-crop { position:absolute; inset:0; display:block; overflow:hidden; }
.category-crop img { position:absolute; top:var(--crop-y); left:var(--crop-x); display:block; width:378.7%; max-width:none; height:auto; }
.category-title { position:absolute; right:14px; bottom:13px; left:14px; color:var(--white); font-size:10px; font-weight:800; letter-spacing:.08em; text-shadow:0 1px 9px rgba(0,0,0,.5); text-transform:uppercase; }
.category-card:after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.4)); pointer-events:none; }
.category-card:hover,.category-card:focus-visible { transform:translateY(-6px); box-shadow:0 23px 45px rgba(0,0,0,.2); }
.category-card:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 3vw; border-bottom:1px solid var(--line); background:var(--paper); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:9px; font-size:10px; line-height:1.05; font-weight:800; letter-spacing:.01em; }
.brand-name { white-space:nowrap; }
.brand small { font-size:8px; font-weight:300; letter-spacing:.02em; }
.brand-avatar { display:block; width:32px; height:32px; border-radius:50%; object-fit:cover; object-position:center; }
.contents-toggle,.contact-link { border:0; background:transparent; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.09em; }
.contents-toggle { position:absolute; left:50%; transform:translateX(-50%); padding:10px; }
.contents-toggle span { margin-right:6px; color:var(--accent); font-size:15px; }
.contact-link span { color:var(--accent); font-size:15px; }
.portfolio-viewer { position:relative; display:flex; flex-direction:column; align-items:center; min-height:calc(100svh - 44px); padding:clamp(32px,4vw,56px) 3vw 80px; overflow:hidden; }
.portfolio-heading { width:min(100%,1120px); }
.book { display:flex; flex-direction:column; align-items:center; width:100%; }
.book-frame { position:relative; width:auto; height:min(calc(100svh - 200px), 49vw, 782px); aspect-ratio:2238 / 2801; container-type:inline-size; overflow:hidden; border-radius:clamp(12px,1.6vw,24px); background:transparent; box-shadow:0 18px 55px rgba(0,0,0,.17), 0 3px 8px rgba(0,0,0,.12); }
.page-image { display:block; width:100%; height:100%; object-fit:cover; opacity:1; transition:opacity .18s ease; }
.page-image.is-changing { opacity:0; }
.page-title-correction { position:absolute; z-index:5; top:15.2%; left:4.25%; display:grid; align-items:center; width:31%; height:7%; background:var(--paper); color:var(--ink); font-size:5.9cqw; font-weight:800; letter-spacing:-.06em; line-height:1; }
.page-title-correction[hidden] { display:none; }
.loading { position:absolute; inset:0; z-index:1; display:grid; place-content:center; gap:10px; background:var(--paper); color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; opacity:0; pointer-events:none; transition:opacity .2s; }
.loading.visible { opacity:1; }
.loading span { width:20px; height:20px; margin:auto; border:2px solid rgba(0,0,0,.15); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
.page-zone { position:absolute; top:50%; z-index:4; width:48px; height:48px; padding:0; border:0; background:transparent; opacity:1; transform:translateY(-50%); }
.page-zone--previous { left:16px; cursor:pointer; }
.page-zone--next { right:16px; cursor:pointer; }
.page-zone:disabled { pointer-events:none; }
.page-zone:after { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.78); color:var(--white); font-size:24px; line-height:1; opacity:0; transform:scale(.9); transition:opacity .2s,transform .2s; }
.page-zone--previous:after { content:"←"; }
.page-zone--next:after { content:"→"; }
.book-frame:hover .page-zone:not(:disabled):after,.page-zone:focus-visible:after { opacity:1; transform:scale(1); }
.artwork-hotspots { position:absolute; inset:0; z-index:3; }
.artwork-hotspots[hidden] { display:none; }
.artwork-hotspot { position:absolute; padding:0; border:0; border-radius:var(--art-radius,5%); background:transparent; cursor:zoom-in; }
.artwork-hotspot:focus-visible,.artwork-hotspot:hover { background:rgba(228,114,18,.08); }
.artwork-hotspot:after { content:'Powiększ ↗'; position:absolute; right:8px; top:8px; padding:6px 7px; border-radius:20px; background:var(--accent); color:var(--white); font-size:7px; font-weight:500; letter-spacing:.06em; opacity:0; transform:translateY(-3px); transition:.18s; }
.artwork-hotspot:focus-visible:after,.artwork-hotspot:hover:after { opacity:1; transform:none; }
.page-caption { min-height:18px; margin:14px 0 0; color:var(--muted); font-size:9px; font-weight:500; letter-spacing:.09em; text-align:center; text-transform:uppercase; }
.pager { position:absolute; right:3vw; bottom:31px; display:flex; align-items:center; gap:12px; }
.pager-button { display:grid; place-items:center; width:43px; height:43px; border:1px solid var(--ink); border-radius:50%; background:transparent; font-size:20px; transition:background .2s,color .2s,opacity .2s; }
.pager-button:hover:not(:disabled) { background:var(--ink); color:var(--paper); }
.pager-button:disabled { cursor:not-allowed; opacity:.25; }
.page-status { display:flex; align-items:center; gap:7px; min-width:72px; font-size:10px; font-weight:500; letter-spacing:.1em; }
.page-status i { width:16px; border-top:1px solid var(--accent); }
.project-jumps { position:absolute; left:3vw; bottom:38px; display:flex; flex-wrap:wrap; gap:8px; max-width:52vw; }
.project-jumps button { padding:0; border:0; background:none; color:var(--muted); font-size:9px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; transition:color .2s; }
.project-jumps button:not(:last-child):after { content:"/"; margin-left:8px; color:var(--line); }
.project-jumps button:hover { color:var(--accent); }
.contents { position:fixed; z-index:10; top:0; bottom:0; left:0; display:flex; flex-direction:column; width:min(440px,100%); padding:28px 32px; background:var(--ink); color:var(--paper); box-shadow:18px 0 40px rgba(0,0,0,.25); transform:translateX(-105%); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.contents.is-open { transform:none; }
.contents-heading { display:flex; justify-content:space-between; align-items:center; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.3); }
.contents-heading p { margin:0; font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.contents-close { width:35px; height:35px; padding:0; border:1px solid var(--paper); border-radius:50%; background:none; color:var(--paper); font-size:25px; font-weight:300; line-height:1; }
.contents nav { display:flex; flex-direction:column; padding-top:20px; }
.contents nav a { display:grid; grid-template-columns:35px 1fr; gap:8px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.15); font-size:15px; font-weight:500; transition:color .2s; }
.contents nav a span { color:var(--accent); font-size:9px; letter-spacing:.08em; }
.contents nav a em { display:block; margin-top:4px; color:rgba(255,255,255,.6); font-size:8px; font-style:normal; font-weight:300; letter-spacing:.09em; text-transform:uppercase; }
.contents nav a:hover,.contents nav a.is-active { color:var(--accent); }
.contents-footer { display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:24px; color:rgba(255,255,255,.72); font-size:10px; }
.artwork-lightbox { width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:58px 5vw 36px; border:0; background:rgba(0,0,0,.96); color:var(--paper); }
.artwork-lightbox::backdrop { background:rgba(0,0,0,.85); }
.artwork-preview { display:block; width:min(84vw,1100px); height:calc(100vh - 120px); max-width:100%; margin:0 auto; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.artwork-preview--packaging { border-radius:4%; }
.artwork-preview--wide { width:96vw; max-width:none; height:calc(100vh - 105px); margin-right:auto; margin-left:auto; object-position:center; }
.artwork-close { position:fixed; z-index:1; right:4vw; top:24px; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.7); border-radius:50%; background:transparent; color:var(--white); font-size:28px; font-weight:300; line-height:1; }
.artwork-lightbox p { margin:16px 0 0; color:rgba(255,255,255,.7); font-size:10px; font-weight:500; letter-spacing:.1em; text-align:center; text-transform:uppercase; }
footer { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:11px 3vw; border-top:1px solid var(--line); color:var(--muted); font-size:8px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:720px) { .hero { min-height:460px; } .hero-navigation { top:18px; gap:16px; } .hero-navigation a { font-size:10px; } .hero-scroll { bottom:50px; width:40px; height:40px; font-size:34px; } .project-categories { padding:52px 16px 32px; } .categories-heading { margin-bottom:28px; } .categories-heading p { font-size:9px; } .categories-grid { grid-template-columns:repeat(2,1fr); gap:14px; } .category-title { right:10px; bottom:10px; left:10px; font-size:8px; } .topbar { height:61px; padding:0 16px; } .brand { font-size:8px; } .brand-avatar { width:28px; height:28px; } .contents-toggle { position:static; transform:none; margin-left:auto; margin-right:12px; font-size:0; } .contents-toggle span { margin:0; font-size:18px; } .contact-link { font-size:0; } .contact-link span { font-size:19px; } .portfolio-viewer { min-height:calc(100svh - 105px); padding:32px 16px 105px; } .book-frame { width:auto; height:min(calc(100svh - 215px), 110vw, 601px); } .pager { right:16px; bottom:78px; gap:8px; } .pager-button { width:38px; height:38px; } .page-status { min-width:58px; font-size:9px; } .project-jumps { bottom:18px; left:16px; max-width:72vw; gap:3px 6px; } .project-jumps button { font-size:8px; } .project-jumps button:not(:last-child):after { margin-left:6px; } footer { padding:10px 16px; font-size:7px; } footer span:last-child { display:none; } .contents { padding:23px 22px; } .contents nav a { padding:12px 0; font-size:14px; } .artwork-lightbox { padding:70px 16px 30px; } .artwork-preview { width:100%; height:calc(100vh - 135px); } .artwork-close { right:16px; top:16px; } }
@media (max-width:720px) { .hero { min-height:760px; } .hero-navigation { top:clamp(22px,5svh,44px); right:auto; left:50%; display:flex; gap:16px; height:auto; padding:6px 0; transform:translateX(-50%); } .hero-navigation a { display:block; font-size:10px; } .hero-navigation:after { top:calc(100% + 3px); left:50%; width:min(75vw,320px); border-top-width:2px; transform:translateX(-50%); } .hero-figure--desktop { display:none; } .hero-figure--mobile { top:11%; right:auto; left:50%; display:block; height:55svh; transform:translateX(-43.15%); } .hero-copy { top:46%; right:16px; left:16px; width:auto; } .hero-first-name { font-size:26px; } .hero-copy h1 { font-size:clamp(48px,13.5vw,58px); } .hero-role { font-size:12px; letter-spacing:.18em; } .hero-copy-rule { width:30%; margin:16px 0; border-top-width:3px; } .hero-about { max-width:94%; } .hero-about-label { font-size:12px; } .hero-about p:last-child { font-size:12px; line-height:1.28; } .hero-buttons { flex-direction:column; align-items:flex-start; gap:11px; margin-top:22px; } .hero-button { min-height:34px; padding:0 12px; border-width:2px; border-radius:7px; font-size:10px; } .hero-button--primary { width:48%; } .hero-button--secondary { width:30%; } .hero-scroll { display:none; } .portfolio-viewer { min-height:calc(100svh - 44px); } }
@media (max-height:680px) and (min-width:721px) { .portfolio-viewer { padding-top:14px; padding-bottom:65px; } .page-caption { margin-top:8px; } .pager { bottom:19px; } .project-jumps { bottom:24px; } }
@media (max-width:720px) {
  .hero-copy { left:24px; }
  .project-categories { padding-top:36px; }
  .pager { bottom:54px; }
  .project-jumps { bottom:8px; }
  .about-section { padding:52px 16px; }
  .contact-section { padding:52px 16px 0; }
  .contact-section .categories-inner { padding:0 0 52px; }
  .contact-intro { grid-template-columns:1fr; gap:28px; }
  .contact-copy h3 { font-size:28px; }
  .contact-copy > p { font-size:13px; }
  .contact-details { gap:12px; margin-top:25px; }
  .contact-details a { gap:12px; font-size:12px; }
  .contact-detail-icon { width:36px; height:36px; }
  .contact-portrait { height:auto; aspect-ratio:1.42; }
  .contact-panel { margin-top:0; padding:48px 16px; }
  .contact-panel-inner { grid-template-columns:76px 1fr; gap:18px; }
  .contact-panel-icon { width:76px; }
  .contact-panel-copy h3 { font-size:25px; }
  .contact-panel-copy p { font-size:12px; }
  .contact-actions { grid-column:1 / -1; margin-top:14px; gap:10px; }
  .contact-action { min-height:46px; font-size:13px; }
  #about { padding-bottom:32px; }
  #tools { padding-top:32px; }
  .tools-grid { grid-template-columns:repeat(3,minmax(0,82px)); justify-content:center; column-gap:clamp(18px,7vw,28px); row-gap:24px; }
  .tool-card:nth-child(7) { grid-column:2; }
  .about-intro { grid-template-columns:1fr; gap:28px; }
  .about-portrait { height:auto; aspect-ratio:1.57; }
  .about-copy h3 { margin-bottom:13px; font-size:28px; }
  .about-copy p { font-size:13px; }
  .about-stats { grid-template-columns:repeat(2,1fr); margin:58px 0 48px; row-gap:32px; }
  .about-stat { padding:0 14px; }
  .about-stat:first-child { padding-left:0; }
  .about-stat:nth-child(3) { padding-left:0; border-left:0; }
  .about-stat:nth-child(n+3) { padding-top:28px; border-top:0; }
  .about-stat-icon { width:45px; height:45px; margin-bottom:14px; }
  .about-stat-value { font-size:38px; }
  .about-stat h3 { min-height:34px; font-size:16px; }
  .about-stat > p:last-child { font-size:10px; }
  .about-gallery { grid-template-columns:repeat(2,1fr); gap:14px; }
  .about-gallery > .about-gallery-item { min-height:0; aspect-ratio:1; }
  .about-gallery-stack { display:contents; }
  .about-gallery-stack .about-gallery-item { height:auto; aspect-ratio:1; }
}
@media (min-width:721px) {
  .tools-grid { grid-template-columns:repeat(7,clamp(72px,8vw,105px)); justify-content:space-between; gap:0; }
}

.category-card::before { content:""; position:absolute; z-index:2; inset:0; background:rgba(228,114,18,.22); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.category-card:hover::before,.category-card:focus-visible::before { opacity:1; }
.category-crop { transition:transform .25s ease; }
.category-card:hover .category-crop,.category-card:focus-visible .category-crop { transform:scale(1.06); }
.category-title { z-index:3; }
.category-action { position:absolute; z-index:4; top:10px; right:10px; padding:6px 8px; border-radius:20px; background:var(--accent); color:var(--white); font-size:8px; font-weight:800; letter-spacing:.05em; opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .2s ease,transform .2s ease; white-space:nowrap; }
.category-card:hover .category-action,.category-card:focus-visible .category-action { opacity:1; transform:none; }
.page-status { min-width:112px; gap:5px; white-space:nowrap; }
.about-stat-icon--shirt { width:40px; height:40px; margin:9px 0 30px; }

/* Wspólny efekt dla obrazów otwieranych w pełnym ekranie. */
.about-gallery-item::before,.artwork-hotspot::before { content:""; position:absolute; z-index:1; inset:0; background:rgba(228,114,18,.22); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.about-gallery-item::after,.artwork-hotspot::after { z-index:2; top:10px; right:10px; padding:6px 8px; background:var(--accent); color:var(--white); font-size:8px; font-weight:800; letter-spacing:.05em; }
.about-gallery-item:hover::before,.about-gallery-item:focus-visible::before,.artwork-hotspot:hover::before,.artwork-hotspot:focus-visible::before { opacity:1; }
.about-gallery-item:hover img,.about-gallery-item:focus-visible img { transform:scale(1.06); }

@media (max-width:720px) {
  .page-status { min-width:104px; gap:4px; font-size:8px; letter-spacing:.06em; }
  .category-action { top:8px; right:8px; padding:5px 7px; font-size:7px; }
  .about-stat-icon--shirt { width:31px; height:31px; margin:7px 0 21px; }
}