.paper-reveal {
  --tear-height: clamp(130px, 15vw, 220px);
  --art-offset: clamp(48px, 6svh, 88px);
  position: relative;
  z-index: 1;
  isolation: isolate;
  height: calc(100svh + var(--art-offset));
  margin-top: -1px;
  background: linear-gradient(var(--paper, #f7f4f4) 0 4px, #000 4px);
}

.paper-reveal__viewport {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(var(--paper, #f7f4f4) 0 4px, #000 4px);
}

/* Overlap the join so fractional layout pixels cannot expose a dark seam. */
.paper-reveal::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -3px 0 auto;
  height: 6px;
  pointer-events: none;
  background: var(--paper, #f7f4f4) url('./assets/paper-texture.png') 0 0 / 400px;
}

.paper-reveal__art {
  position: absolute;
  inset: var(--art-offset) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3svh, 32px);
  padding: 36px 24px;
  background: #000;
  color: #f7f4f4;
}

.featured-art-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 6vw, 100px);
  width: min(100%, 1400px);
}

.featured-art {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}

.featured-art__image-link {
  display: block;
  width: min(100%, 66svh, 720px);
  height: min(72svh, 960px);
}

.featured-art__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Soften only the photograph's outer black border into the black stage. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
}

.featured-art__more {
  position: absolute;
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(20px, 3svh, 36px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 3px;
  color: #aaa3a8;
  font: 400 28px / 1.2 'Reenie Beanie', 'Segoe Print', cursive;
  text-decoration: none;
}

.featured-art__arrow {
  width: 38px;
  height: 23px;
  flex: none;
  transform: translateY(1px);
}
.featured-art__more:hover { color: #fff; }
.paper-reveal__art a:focus-visible { outline: 1px solid #f7f4f4; outline-offset: 8px; }

@media (max-height: 650px) {
  .paper-reveal__art { padding-block: 20px; gap: 12px; }
  .featured-art__image-link { height: 60svh; }
}

@media (max-width: 600px) {
  .paper-reveal__art { padding: 20px 16px; gap: 16px; }
  .featured-art-pair { grid-template-columns: 1fr; gap: 20px; }
  .featured-art__image-link { height: 33svh; }
}

.paper-reveal__sheet {
  position: absolute;
  /* The tear is attached to the end of the paper and moves with the text. */
  inset: 0 0 auto;
  height: 0;
  pointer-events: none;
}

.paper-reveal__edge {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: var(--tear-height);
}

.paper-reveal__edge::before,
.paper-reveal__edge::after {
  content: '';
  position: absolute;
  inset: 0;
}

.paper-reveal__edge::before {
  background: var(--paper, #f7f4f4) url('./assets/paper-texture.png') 0 0 / 400px;
  -webkit-mask: url('./assets/scroll-paper-mask.svg?v=natural-tear-1') top / 100% 100% no-repeat;
  mask: url('./assets/scroll-paper-mask.svg?v=natural-tear-1') top / 100% 100% no-repeat;
}

.paper-reveal__edge::after {
  background: url('./assets/scroll-paper-rim.svg?v=natural-tear-1') top / 100% 100% no-repeat;
}

/* The tethered lens belongs to the paper page, above the artwork opening. */
[data-paper-reveal] .magnifier-layer {
  clip-path: inset(0 0 var(--paper-foreground-clip, 0px) 0);
}

[data-art-view] .magnifier-layer { visibility: hidden; }

@media print {
  .paper-reveal { display: none; }
}