/* Shared finishing rules for the No.25/29/31/32/33/39 imported article batch. */
body {
  --paper: var(--page);
  --line: rgba(var(--ar), .24);
  --matte: #e7e1d9;
}

body.night {
  --page: #1b1a18;
  --paper: var(--page);
  --ink: #ece7de;
  --muted: #b7afa4;
  --accent: #d18a79;
  --ar: 112, 91, 82;
  --line: rgba(188, 172, 159, .26);
  --matte: #302c28;
}

.imported-appreciation > .photo {
  width: min(calc(100vw - 28px), 960px);
  margin-top: 46px;
  margin-bottom: 50px;
}

.imported-appreciation > .photo + .photo {
  margin-top: 82px;
}

.imported-appreciation > .photo.portrait {
  width: min(calc(100vw - 40px), 690px);
}

.imported-appreciation > .photo.small {
  width: min(calc(100vw - 48px), 540px);
}

.imported-appreciation > .photo img {
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
}

.imported-appreciation > .sub-kicker {
  gap: clamp(18px, 3vw, 36px);
  width: min(calc(100vw - 64px), 820px);
  margin-right: 0;
  margin-left: 50%;
  color: color-mix(in srgb, var(--ink) 72%, var(--accent) 28%);
  transform: translateX(-50%);
}

.imported-appreciation > .sub-kicker::before,
.imported-appreciation > .sub-kicker::after {
  background: color-mix(in srgb, var(--line) 78%, transparent);
}

@media (max-width: 760px) {
  .imported-appreciation > .photo,
  .imported-appreciation > .photo.portrait,
  .imported-appreciation > .photo.small {
    width: calc(100vw - 24px);
    margin-top: 34px;
    margin-bottom: 38px;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .imported-appreciation > .photo img {
    border-radius: 12px;
    box-shadow: none;
  }

  .imported-appreciation > .photo + .photo {
    margin-top: 60px;
  }

  .imported-appreciation > .sub-kicker {
    width: calc(100vw - 32px);
    gap: 14px;
    font-size: clamp(22px, 6.4vw, 28px);
    white-space: normal;
  }
}