.portfolio-page{background-attachment:fixed}
.portfolio-main{width:min(100%,1280px);margin:auto;padding:45px 28px 36px}
.portfolio-heading{margin-bottom:42px}
.portfolio-heading h1{font-size:clamp(42px,6vw,76px);line-height:1.1;color:var(--rust)}
.portfolio-heading p{font-size:clamp(18px,2vw,24px);margin:16px 0 0;line-height:1.4;color:#453b34}
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:22px}
.art-grid[hidden]{display:none}
.art-card{margin:0;min-width:0}
.art-card a{position:relative;display:block;cursor:zoom-in;box-shadow:0 7px 24px #32281c1a;transition:transform .35s ease,box-shadow .35s ease}
.art-card img{display:block;width:100%;height:auto}
.art-card a:hover,.art-card a:focus-visible{transform:translateY(-7px) scale(1.015);box-shadow:0 18px 38px #32281c33;z-index:1}
.art-zoom{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eee7dbdf;color:#543b2b;font-family:Arial,sans-serif;font-size:22px;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.art-card a:hover .art-zoom,.art-card a:focus-visible .art-zoom{opacity:1;transform:none}
.art-card.will-reveal{opacity:0;transform:translateY(30px) scale(.97)}
.art-card.is-revealed{animation:card-reveal .7s cubic-bezier(.2,.65,.25,1) both;animation-delay:var(--reveal-delay,0ms)}
@keyframes card-reveal{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
html.artwork-open{overflow:hidden}
.art-viewer{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#eee7dc;overflow:hidden}
.art-viewer::backdrop{background:#1a1715ed;backdrop-filter:blur(10px);animation:backdrop-open .3s ease}
@keyframes backdrop-open{from{opacity:0}to{opacity:1}}
.viewer-shell{display:grid;place-items:center;position:relative;width:100%;height:100%;padding:66px 90px 38px}
.viewer-shell button{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #eee7dc50;border-radius:50%;background:#2a241f80;color:#eee7dc;font-family:Arial,sans-serif;font-size:28px;line-height:1;cursor:pointer;transition:background .2s,transform .2s}
.viewer-shell button:hover{background:#8d542e99;transform:scale(1.05)}
.viewer-close{top:18px;right:24px;font-size:34px!important}
.viewer-previous{left:24px;top:calc(50% - 24px)}
.viewer-next{right:24px;top:calc(50% - 24px)}
.viewer-stage{margin:0;min-width:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:15px;touch-action:pan-y pinch-zoom}
.viewer-image{display:block;max-width:100%;width:auto;height:auto;max-height:calc(100dvh - 160px);object-fit:contain;box-shadow:0 16px 70px #0005;user-select:none;-webkit-user-drag:none}
.viewer-caption{width:100%;display:flex;align-items:center;justify-content:space-between;gap:25px;font:18px/1.35 Poiret,'Trebuchet MS',sans-serif}
.viewer-description{max-width:520px}
.viewer-count{white-space:nowrap;font:14px/1.4 Arial,sans-serif;color:#eee7dcaa}
@media(max-width:1000px){.art-grid{gap:22px}}
@media(max-width:640px){
  .portfolio-main{padding:28px 18px 20px}
  .portfolio-heading{margin-bottom:28px}
  .portfolio-heading h1{font-size:44px}
  .portfolio-heading p{font-size:18px;max-width:280px}
  .art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .art-zoom{opacity:1;transform:none;width:28px;height:28px;right:8px;bottom:8px;font-size:18px}
  .viewer-shell{padding:76px 14px 92px}
  .viewer-image{max-height:calc(100dvh - 230px)}
  .viewer-caption{font-size:16px;gap:12px;align-items:flex-start}
  .viewer-description{max-width:calc(100% - 48px)}
  .viewer-close{top:16px;right:16px}
  .viewer-previous{left:calc(50% - 62px);top:auto;bottom:max(22px,env(safe-area-inset-bottom))}
  .viewer-next{right:calc(50% - 62px);top:auto;bottom:max(22px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.art-card.will-reveal{opacity:1;transform:none}.art-card.is-revealed,.art-viewer::backdrop{animation:none}.art-card a:hover{transform:none}}