/* ============================================================
   LOUPE — the closest a screen gets to touching the material
   ============================================================ */

.loupe-hint{
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  color: var(--clay);
}

.mats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.mat{
  margin: 0;
  border-radius: clamp(16px, 1.8vw, 22px);
  overflow: hidden;
  background: var(--bone-hi);
  border: 1px solid var(--line-light);
}

.mat-swatch{
  position: relative;
  aspect-ratio: 4 / 2.9;
  background-image: var(--mat);
  background-size: 92px 92px;
  cursor: crosshair;
  overflow: hidden;
  touch-action: pan-y;
}

/* the lens shows the same drawing, eight times larger */
.mat-lens{
  position: absolute;
  top: 0;
  left: 0;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background-image: var(--mat);
  /* 92px tile x 5 = 460px. If you change this, change ZOOM in main.js to
     match, or the magnified point drifts away from the pointer. */
  background-size: 460px 460px;
  box-shadow:
    0 0 0 1px rgba(22, 21, 26, .18),
    0 0 0 6px rgba(250, 248, 244, .5),
    0 14px 34px rgba(22, 21, 26, .32);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity .25s var(--ease), transform .3s var(--ease-out);
  pointer-events: none;
  will-change: transform, background-position;
}
.mat-swatch.is-lit .mat-lens{ opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* a hairline cross so it reads as an instrument, not a bubble */
.mat-lens::before,
.mat-lens::after{
  content: "";
  position: absolute;
  background: rgba(250, 248, 244, .45);
}
.mat-lens::before{ top: 50%; left: 12%; width: 76%; height: 1px; }
.mat-lens::after{ left: 50%; top: 12%; height: 76%; width: 1px; }

.mat figcaption{
  display: grid;
  gap: 3px;
  padding: clamp(16px, 1.8vw, 22px);
}
.mat-name{ font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.mat-note{ font-size: .82rem; line-height: 1.5; color: var(--on-light-mute); }

@media (max-width: 900px){
  .mats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mat-lens{ width: 104px; height: 104px; }   /* zoom stays 5x; only the lens shrinks */
}
@media (max-width: 560px){
  .mats{ grid-template-columns: 1fr; }
}