/* Sensitive artwork (artistic nudity): the overlay shown over a pre-blurred
   placeholder until the visitor chooses "View artwork". Behaviour lives in
   sensitive-media.js; see PROJECT_NOTES.md, "Sensitive artwork (nudity blur)".
   Layout of each wrapper (where it sits, how it hugs its image) stays with the
   page's own stylesheet; this file only draws the overlay. */
.sensitive-media{position:relative;}

.sensitive-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(6,6,9,0.34);
  opacity:1;
  transition:opacity .6s ease, visibility 0s linear 0s;
}
.sensitive-media.is-revealed .sensitive-overlay{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .6s ease, visibility 0s linear .6s;
}
/* Already chosen earlier in this visit: no overlay flash before the script runs. */
html.sensitive-session-revealed .sensitive-overlay{display:none;}

.sensitive-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:100%;
  padding:20px 24px;
  background:rgba(8,8,10,0.82);
  border:1px solid rgba(201,162,39,0.6);
  border-radius:4px;
  box-shadow:0 10px 34px rgba(0,0,0,0.45);
  text-align:center;
}
.sensitive-label{
  margin:0;
  color:#fff;
  font-family:'EB Garamond',Georgia,serif;
  font-size:21px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
}
.sensitive-sep{color:var(--gold,#c9a227);}

/* The button needs the script; without JavaScript the image simply stays blurred. */
.sensitive-reveal{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 24px;
  border:2px solid var(--gold,#c9a227);
  border-radius:2px;
  background:var(--gold,#c9a227);
  color:#0b0b0d;
  font-family:'Cinzel',Georgia,serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
html.sensitive-js .sensitive-reveal{display:inline-flex;}
.sensitive-reveal:hover{background:#0b0b0d; color:var(--gold,#c9a227);}
.sensitive-reveal:focus-visible{outline:3px solid #fff; outline-offset:3px;}
.sensitive-reveal[disabled]{cursor:progress; opacity:.85;}

/* Compact bar attached directly beneath the image (the homepage collage,
   where most of the picture stays visible and only some paintings are
   blurred), so it never hides any of the picture. It folds away after reveal. */
.sensitive-overlay.sensitive-overlay-bar{
  position:relative;
  inset:auto;
  padding:0;
  background:none;
  max-height:240px;
  overflow:hidden;
}
.sensitive-media.is-revealed .sensitive-overlay-bar{
  max-height:0;
  transition:opacity .6s ease, max-height .5s ease .5s, visibility 0s linear 1s;
}
.sensitive-overlay-bar .sensitive-panel{
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 16px;
  width:100%;
  padding:12px 16px;
  border-width:0 1px 1px;
  border-color:rgba(201,162,39,0.4);
  border-radius:0;
  box-shadow:none;
  background:rgba(8,8,10,0.92);
}
.sensitive-overlay-bar .sensitive-label{font-size:19px;}
.sensitive-overlay-bar .sensitive-reveal{min-height:42px; padding:0 18px; font-size:14px;}

/* Temporary blurred copy laid over the image while the real file replaces it. */
.sensitive-cover{
  position:absolute;
  z-index:2;
  box-sizing:border-box; /* keeps any border the page gives its images aligned */
  margin:0;
  max-width:none;
  max-height:none;
  pointer-events:none;
  opacity:1;
  transition:opacity .6s ease;
}
.sensitive-cover.is-fading{opacity:0;}

/* "Show all artwork": reveals every blurred image on the page. */
.sensitive-show-all{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 16px;
  border:1px solid var(--gold,#c9a227);
  border-radius:2px;
  background:rgba(8,8,10,0.55);
  color:var(--gold,#c9a227);
  font-family:'Cinzel',Georgia,serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.sensitive-show-all:hover{background:var(--gold,#c9a227); color:#0b0b0d;}
.sensitive-show-all:focus-visible{outline:3px solid #fff; outline-offset:3px;}
.sensitive-show-all[hidden]{display:none;}

@media (max-width:680px){
  .sensitive-panel{padding:16px 18px; gap:12px;}
  .sensitive-label{font-size:19px;}
  .sensitive-overlay-bar .sensitive-panel{padding:10px 12px;}
  .sensitive-overlay-bar .sensitive-label{font-size:18px;}
}
@media (prefers-reduced-motion: reduce){
  .sensitive-overlay,
  .sensitive-media.is-revealed .sensitive-overlay,
  .sensitive-cover{transition:none;}
}