:root { --portfolio-ink:#302720; --portfolio-paper:#f7f1e9; --portfolio-accent:#ad7e58; }
body.portfolio-page { margin:0; color:var(--portfolio-ink); background:var(--portfolio-paper); font-family:'DM Sans',Arial,sans-serif; }
.portfolio-page-main { width:min(1240px, calc(100% - 48px)); margin:0 auto; padding:88px 0 100px; }
.portfolio-intro { max-width:740px; margin:0 auto 42px; text-align:center; }
.portfolio-eyebrow { margin:0 0 12px; color:var(--portfolio-accent); font-size:11px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }
.portfolio-intro h1 { margin:0; font:400 clamp(52px,7vw,92px)/.98 'Playfair Display',Georgia,serif; letter-spacing:-.035em; }
.portfolio-intro h1 em { color:var(--portfolio-accent); font-style:normal; }
.portfolio-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:38px 0 42px; }
.portfolio-filters a { padding:9px 14px; color:#624b3d; border:1px solid rgba(101,72,61,.21); border-radius:999px; font-size:12px; font-weight:600; text-decoration:none; transition:color .2s ease,background .2s ease,border-color .2s ease; }
.portfolio-filters a:hover,.portfolio-filters a.active { color:#fffaf6; background:#65483d; border-color:#65483d; }

/* Naturalny masonry: zdjęcia zachowują własne proporcje bez przycinania. */
.portfolio-grid { position:relative; min-height:1px; }
.portfolio-card { position:absolute; width:calc((100% - 40px)/3); margin:0; display:block; overflow:hidden; border-radius:4px; background:#5e4b40; box-shadow:0 15px 36px rgba(55,43,35,.1); }
.portfolio-card img { display:block; width:100%; height:auto; object-fit:contain; transition:transform .65s ease,filter .45s ease; }
.portfolio-card::after { content:''; position:absolute; inset:35% 0 0; background:linear-gradient(180deg,transparent,rgba(29,21,17,.75) 100%); pointer-events:none; }
.portfolio-card div { position:absolute; z-index:1; right:0; bottom:0; left:0; padding:24px; color:#fff; }
.portfolio-card span { display:block; margin-bottom:7px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.portfolio-card h2 { margin:0; font:400 28px/1.08 'Playfair Display',Georgia,serif; }
.portfolio-card p { margin:9px 0 0; color:rgba(255,250,246,.84); font-size:13px; line-height:1.45; }
.portfolio-card:hover img { transform:scale(1.03); filter:saturate(1.06); }
.portfolio-card:hover { box-shadow:0 22px 44px rgba(55,43,35,.18); }
.portfolio-empty { padding:70px 20px; color:#75675d; text-align:center; }
@media(max-width:850px) { .portfolio-page-main { padding-top:62px; }.portfolio-card { width:calc((100% - 20px)/2); } }
@media(max-width:600px) { .portfolio-page-main { width:min(100% - 32px,1240px); padding-top:48px; }.portfolio-intro h1 { font-size:52px; }.portfolio-card { width:100%; }.portfolio-filters { margin-top:28px; } }
.portfolio-card video{display:block;width:100%;height:auto;object-fit:contain}