/* ==========================================================
   Gallery
   ========================================================== */

.arcade{
  --arch: 50% 50% 0 0 / 30% 30% 0 0;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:clamp(10px,1.6vw,26px);
  align-items:end;
  padding:0 0 3px;
  border-bottom:2px solid var(--terracotta-dark,#7f3423);
  margin:0;
}
.arcade figure{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--arch);
  background:#2a1e16;
  aspect-ratio:var(--ratio,3/5);
  box-shadow:0 14px 34px rgba(58,36,22,.16);
}
/* Alternating heights: a real arcade is not a row of identical bays. */
.arcade figure:nth-child(3n+1){--ratio:3/5.4}
.arcade figure:nth-child(3n+2){--ratio:3/4.7}
.arcade figure:nth-child(3n){--ratio:3/5.1}

.arcade img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.12);
  filter:brightness(.42) saturate(.7);
}
/* The keystone: a small terracotta mark at the crown of each arch. */
.arcade figure::before{
  content:"";
  position:absolute;
  top:5px;left:50%;
  width:9px;height:9px;
  margin-left:-4.5px;
  border-radius:50%;
  background:var(--terracotta,#a8492e);
  opacity:0;
  transition:opacity .6s ease .5s;
  z-index:3;
}
/* The light. A warm shaft that rises from the base of the niche. */
.arcade figure::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(0deg,
    rgba(255,214,160,.55) 0%,
    rgba(255,214,160,.16) 38%,
    rgba(30,20,14,0) 70%);
  opacity:0;
  transform:translateY(38%);
  transition:opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.arcade figure.lit img{
  transform:scale(1);
  filter:brightness(1) saturate(1.12) contrast(1.04) hue-rotate(-4deg);
  transition:transform 2.4s cubic-bezier(.2,.7,.2,1), filter 1.6s ease;
}
.arcade figure.lit::after{opacity:1;transform:none}
.arcade figure.lit::before{opacity:1}
.arcade figure:hover img{transform:scale(1.05)}

.arcade figcaption{
  position:absolute;
  inset:auto 0 0 0;
  z-index:4;
  padding:44px 14px 14px;
  background:linear-gradient(180deg,rgba(32,21,15,0),rgba(32,21,15,.82));
  color:#f7ecdd;
  font:400 .74rem/1.4 var(--sans);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.arcade figure:hover figcaption,
.arcade figure:focus-within figcaption{transform:none}
.arcade figcaption b{color:#f2c9a3;font-weight:600}

@media (max-width:900px){
  .arcade{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}
  .arcade figure:nth-child(n+7){display:none}
}
@media (max-width:560px){
  .arcade{grid-template-columns:repeat(2,1fr)}
  .arcade figure:nth-child(n+5){display:none}
  .arcade figcaption{transform:none;font-size:.68rem;padding:28px 10px 10px}
}

/* ----------------------------------------------------------
   THE SALON WALL
   Pictures at different sizes on one hanging line. Each
   arrives slightly askew and settles level, as if just hung.
   ---------------------------------------------------------- */

.salon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(14px,2.4vw,38px);
  padding:38px 0;
  margin:0;
}
/* The hanging line itself. */
.salon::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(127,52,35,.35) 12%, rgba(127,52,35,.35) 88%, transparent);
}
.salon figure{
  position:relative;
  margin:0;
  background:var(--paper-light,#fbf8f1);
  padding:10px 10px 34px;              /* the mount */
  border:1px solid rgba(75,55,38,.22);
  box-shadow:0 10px 26px rgba(58,36,22,.10);
  opacity:0;
  transform:translateY(26px) rotate(var(--tilt,-1.4deg));
  transition:opacity .7s ease, transform 1s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  transition-delay:calc(var(--i,0) * 110ms);
}
.salon figure.hung{opacity:1;transform:none}
.salon figure:hover{
  box-shadow:0 20px 46px rgba(58,36,22,.20);
  transform:translateY(-5px);
  z-index:2;
}
.salon figure:nth-child(2n){--tilt:1.6deg}
.salon figure:nth-child(3n){--tilt:-.8deg}
.salon img{display:block;width:100%;height:100%;object-fit:cover}

/* Sizes, deliberately unequal. */
.salon .sz-s{width:clamp(120px,14vw,180px)}
.salon .sz-m{width:clamp(160px,20vw,250px)}
.salon .sz-l{width:clamp(200px,27vw,340px)}
.salon .sz-s img{aspect-ratio:4/5}
.salon .sz-m img{aspect-ratio:1/1}
.salon .sz-l img{aspect-ratio:5/4}
.salon .tall img{aspect-ratio:3/4}

.salon figcaption{
  position:absolute;
  left:10px;right:10px;bottom:9px;
  font:400 .66rem/1.35 var(--sans);
  color:var(--muted,#655f56);
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ----------------------------------------------------------
   THE VITRINE
   A dark case, full bleed. A slow specular sweep crosses it,
   and objects lift when picked up.
   ---------------------------------------------------------- */

.vitrine{
  position:relative;
  margin:0;
  padding:clamp(48px,7vw,92px) 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,210,150,.16), transparent 60%),
    linear-gradient(180deg,#241a13,#191210 60%,#221812);
  overflow:hidden;
}
/* Light shafts from above, as in a case lit from the top. */
.vitrine::before{
  content:"";
  position:absolute;
  inset:-20% -10%;
  pointer-events:none;
  background:
    linear-gradient(102deg, transparent 34%, rgba(255,222,178,.10) 40%, transparent 46%),
    linear-gradient(96deg, transparent 58%, rgba(255,222,178,.07) 63%, transparent 68%);
}
/* The sweep. Very slow, very faint — you notice it only if you wait. */
.vitrine::after{
  content:"";
  position:absolute;
  top:-40%;bottom:-40%;
  width:38%;
  left:-40%;
  pointer-events:none;
  background:linear-gradient(100deg,
    transparent, rgba(255,231,199,.10) 45%, rgba(255,231,199,.14) 55%, transparent);
  transform:skewX(-12deg);
  animation:vitrine-sweep 14s ease-in-out infinite;
}
@keyframes vitrine-sweep{
  0%   {left:-45%;opacity:0}
  12%  {opacity:1}
  78%  {opacity:1}
  100% {left:118%;opacity:0}
}

.vitrine-inner{
  position:relative;
  z-index:2;
  width:min(calc(100% - 64px),var(--max,1380px));
  margin-inline:auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(18px,3vw,54px);
  flex-wrap:wrap;
}
.vitrine figure{
  position:relative;
  margin:0;
  width:clamp(150px,19vw,260px);
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 140ms);
}
.vitrine figure.shown{opacity:1;transform:none}
.vitrine img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:var(--ratio,3/4);
  object-fit:cover;
  filter:saturate(1.08) contrast(1.06) brightness(1.02);
  box-shadow:0 22px 44px rgba(0,0,0,.5), 0 2px 0 rgba(255,224,186,.18) inset;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.vitrine figure:nth-child(2n) img{--ratio:4/5}
.vitrine figure:nth-child(3n) img{--ratio:1/1}
.vitrine figure:hover img{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 34px 62px rgba(0,0,0,.58), 0 2px 0 rgba(255,224,186,.3) inset;
}
/* The reflection on the case floor. */
.vitrine figure::after{
  content:"";
  position:absolute;
  left:6%;right:6%;
  bottom:-14px;
  height:14px;
  background:radial-gradient(60% 100% at 50% 0%, rgba(255,214,166,.22), transparent 70%);
}
.vitrine figcaption{
  margin-top:20px;
  font:400 .72rem/1.45 var(--sans);
  color:#cbb59d;
}
.vitrine figcaption b{color:#f0c9a8;font-weight:600}

.vitrine-label{
  position:relative;
  z-index:2;
  width:min(calc(100% - 64px),var(--max,1380px));
  margin:0 auto clamp(30px,4vw,52px);
  color:#e9dcc9;
}
.vitrine-label .section-kicker{color:#e0a97f}
.vitrine-label h2{
  font:500 clamp(1.9rem,3.2vw,3rem)/1.1 var(--serif);
  margin:0;
  letter-spacing:-.025em;
  color:#f6ecdd;
}

@media (max-width:620px){
  .vitrine-inner{gap:22px}
  .vitrine figure{width:clamp(130px,40vw,180px)}
}

/* ----------------------------------------------------------
   MOTION OFF
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .arcade figure::after{opacity:1;transform:none}
  .arcade img{transform:none;filter:none}
  .salon figure,.vitrine figure{opacity:1;transform:none;transition:none}
  .vitrine::after{animation:none;display:none}
}
html.a11y-motion .arcade img{transform:none !important;filter:none !important}
html.a11y-motion .arcade figure::after{opacity:1 !important;transform:none !important}
html.a11y-motion .salon figure,
html.a11y-motion .vitrine figure{opacity:1 !important;transform:none !important;transition:none !important}
html.a11y-motion .vitrine::after{animation:none !important;display:none}

html.a11y-contrast .vitrine{background:#000}
html.a11y-contrast .vitrine::before,
html.a11y-contrast .vitrine::after{display:none}
html.a11y-contrast .arcade img{filter:none !important}