/* ============ se-arts.dk — collection wall (Pinboard × striped wallpaper) ============ */
:root{
  --paper:#FAF7F2; --pink:#E8BFC0; --brown:#4A3028;
  --butter:#FADD8B; --olive:#93823A;
  --head:"Bricolage Grotesque",sans-serif;
  --body:"Cormorant Garamond",serif;
}
*{box-sizing:border-box; margin:0;}
body{
  /* the newsstand wallpaper */
  background:var(--pink);
  background-image:repeating-linear-gradient(90deg, transparent 0 90px, rgba(250,247,242,.5) 90px 120px);
  color:var(--brown); font-family:var(--body); min-height:100vh;
}

/* ---------- header ---------- */
.chead{ text-align:center; padding:30px 20px 6px; }
.chead h1{
  font-family:var(--head); font-weight:800;
  font-size:clamp(2.4rem,7vw,4.5rem); line-height:1;
}
.csub{ font-style:italic; font-size:1.2rem; margin-top:6px; }
.cback{
  display:inline-block; font-family:var(--head); font-weight:700;
  color:var(--brown); text-decoration:none;
  background:var(--paper); padding:6px 14px; rotate:-1.5deg;
  box-shadow:3px 4px 0 rgba(74,48,40,.2); margin-bottom:16px;
}
.cback:hover{ rotate:1deg; }

/* ---------- the wall ---------- */
.cwall{
  max-width:1080px; margin:30px auto 40px; padding:0 22px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:40px 30px;
}
.empty{
  grid-column:1/-1; text-align:center; font-style:italic; font-size:1.4rem;
  background:var(--paper); padding:34px; rotate:-1deg;
  box-shadow:4px 5px 0 rgba(74,48,40,.18);
}
.cpiece{
  background:#fff; padding:12px 12px 10px;
  box-shadow:3px 5px 0 rgba(74,48,40,.22);
  position:relative; cursor:zoom-in;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1);
}
.cpiece.tl{ transform:rotate(-2.5deg); }
.cpiece.tr{ transform:rotate(2deg); }
.cpiece:hover{ transform:rotate(0) scale(1.04); z-index:5; }
.cpiece img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--paper);
}
.cpiece figcaption{
  font-style:italic; text-align:center; padding-top:8px; font-size:1.05rem;
  word-break:break-word;
}
.ctape{
  position:absolute; top:-11px; left:50%; translate:-50% 0;
  width:82px; height:23px; rotate:-4deg;
  background:rgba(250,221,139,.85); z-index:1;
}
.ctape.dots{
  background-color:var(--pink);
  background-image:radial-gradient(var(--brown) 1.3px, transparent 1.4px);
  background-size:10px 10px;
}
.cfoot{ text-align:center; padding:0 0 26px; font-style:italic; }

/* ---------- lightbox ---------- */
body.lb-open{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:3000;
  background:rgba(74,48,40,.9);
  display:flex; align-items:center; justify-content:center;
  cursor:zoom-out; padding:4vh 4vw;
}
.lightbox[hidden]{ display:none; }
.lightbox figure{
  background:var(--paper); padding:14px 14px 10px; margin:0;
  box-shadow:8px 10px 0 rgba(0,0,0,.3);
  transform:rotate(-1deg);
  animation:lb-in .25s cubic-bezier(.3,1.5,.5,1);
  max-width:min(94vw,1000px); max-height:92vh;
  display:flex; flex-direction:column;
}
@keyframes lb-in{ from{ transform:rotate(-4deg) scale(.85); opacity:0; }
                  to{ transform:rotate(-1deg) scale(1); opacity:1; } }
.lb-img{
  max-width:100%; max-height:78vh; object-fit:contain; display:block;
}
.lb-cap{
  font-style:italic; color:var(--brown);
  text-align:center; padding-top:8px; font-size:1.2rem;
}
.lb-close{
  position:fixed; top:18px; right:18px;
  background:var(--butter); color:var(--brown);
  border:none; font-size:1.2rem; font-family:var(--head); font-weight:700;
  padding:8px 12px; cursor:pointer; rotate:3deg;
  box-shadow:3px 4px 0 rgba(0,0,0,.25);
}
.lb-close:hover{ rotate:-3deg; }