/* MARTYNA MATUSIAK — Visual Artist. A quiet exhibition: artwork first, text as wall labels. */
:root{--paper:#f8f6f1;--ink:#1a1917;--muted:#77756f;--faint:#a3a19a;--line:#dddad2;--sans:"Helvetica Neue","Helvetica",Arial,sans-serif;--gap:clamp(16px,2.4vw,40px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit}button:focus-visible{outline:1px solid var(--ink);outline-offset:6px}img{max-width:100%;display:block}
.site-shell{width:calc(100% - 2*clamp(18px,5vw,96px));max-width:1560px;margin-inline:auto}

.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:28px 0 22px;font-size:13px;letter-spacing:.01em}
.masthead h1,.masthead p{margin:0;font:inherit;letter-spacing:inherit}
.masthead h1{font-weight:500}.masthead p{color:var(--muted)}

/* Rooms */
.gallery{padding-top:clamp(40px,6vw,96px)}
.series{padding:0 0 clamp(120px,13vw,220px)}
.series-heading{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;border-top:1px solid var(--line);padding:16px 0 clamp(30px,3.4vw,56px)}
.series-number{grid-column:span 2;font-size:11px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.series-number span{color:var(--faint)}
.series-name{grid-column:3 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 32px}
.series-name h2{margin:0;font-size:clamp(17px,1.45vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.series-meta{margin:0;color:var(--muted);font-size:12px;letter-spacing:.01em;line-height:1.5}
.meta-dot{padding-inline:6px;color:var(--faint)}

/* Hang */
.image-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(48px,6vw,104px);align-items:end}
.frame{min-width:0;margin:0;grid-column:span 6}
.frame--lead{grid-column:1 / -1}
.frame--third{grid-column:span 4}
.frame--quarter{grid-column:span 3}
.frame--twothirds{grid-column:span 8}
.frame--context{grid-column:4 / span 6}
.art-button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit}
.art-button img{width:auto;max-width:100%;height:auto;margin-inline:auto;object-fit:contain;max-height:min(78vh,900px)}
.frame--lead .art-button img{max-height:min(84vh,1000px)}
.frame--lead--square .art-button img{max-height:min(80vh,860px)}
.frame--context .art-button img{max-height:min(70vh,760px)}
.frame--quarter .art-button img{max-height:min(66vh,640px)}

.frame figcaption{display:flex;align-items:baseline;gap:14px;margin-top:12px;font-size:11px;line-height:1.4;color:var(--muted)}
.frame figcaption span:first-child{min-width:18px;color:var(--faint);font-size:10px;font-variant-numeric:tabular-nums}

.site-footer{border-top:1px solid var(--line);padding:22px 0 clamp(70px,8vw,120px);display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font-size:12px;color:var(--muted)}
.site-footer>div{display:flex;flex-direction:column;gap:5px}
.email-text{color:var(--ink);user-select:text}

/* Viewer */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;background:#141412;z-index:1000;display:flex;align-items:center;justify-content:center;color:#efede7}
.lightbox-stage{width:min(100% - 160px,1700px);height:100%;padding:64px 0 56px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lightbox-stage img{object-fit:contain;max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;touch-action:pan-y}
.lightbox-footer{align-self:stretch;display:flex;justify-content:space-between;gap:20px;color:#a9a7a0;font-size:12px;padding-top:16px;font-variant-numeric:tabular-nums}
.lightbox-close,.lightbox-previous,.lightbox-next{border:0;background:transparent;color:#efede7;cursor:pointer;position:absolute}
.lightbox-close{top:20px;right:26px;font-size:12px;letter-spacing:.02em;display:flex;align-items:center;gap:10px;padding:6px}
.lightbox-close span{font-size:22px;line-height:1}
.lightbox-previous,.lightbox-next{top:50%;transform:translateY(-50%);font-size:44px;font-weight:200;line-height:1;padding:14px 18px}
.lightbox-previous{left:14px}.lightbox-next{right:14px}
.lightbox button:focus-visible{outline-color:#efede7}
body.lightbox-open{overflow:hidden}

@media(max-width:900px){
  .frame--quarter{grid-column:span 6}.frame--third{grid-column:span 6}
  .frame--twothirds,.frame--context{grid-column:1 / -1}
  .series-number{grid-column:1 / -1;margin-bottom:8px}.series-name{grid-column:1 / -1}
}
@media(max-width:620px){
  .site-shell{width:calc(100% - 36px)}.masthead{padding:20px 0 16px;font-size:12px}
  .gallery{padding-top:28px}.series{padding-bottom:100px}
  .series-name{flex-direction:column;gap:4px}.series-meta{font-size:11px}
  .image-grid{row-gap:44px;column-gap:14px}
  .frame,.frame--third,.frame--twothirds,.frame--context,.frame--lead{grid-column:1 / -1}
  .frame--quarter{grid-column:span 6}
  .frame .art-button img,.frame--lead .art-button img{max-height:none;width:100%}
  .frame figcaption{margin-top:9px}
  .site-footer{flex-direction:column;gap:26px;padding-bottom:80px}
  .lightbox-stage{width:calc(100% - 28px);padding:62px 0 92px}.lightbox-stage img{max-height:calc(100dvh - 205px)}
  .lightbox-close{right:12px;top:14px}
  .lightbox-previous,.lightbox-next{top:auto;bottom:12px;transform:none;font-size:36px}.lightbox-previous{left:16px}.lightbox-next{right:16px}
}