.reviews-section {
  --review-surface: #f2e5d2;
  --review-light: #fff9ed;
  --review-line: #e3d1b7;
  margin: 0 20px 24px;
  padding-block: clamp(44px, 6vw, 82px) clamp(35px, 5vw, 64px);
  border: 1px solid var(--review-line);
  border-radius: 36px;
  background: radial-gradient(ellipse at 50% 35%, var(--review-light), transparent 70%),
    url("paper-grain.svg") var(--review-surface);
}

.reviews-section--editing {
  --review-surface: #e2dbf1;
  --review-light: #f8f4ff;
  --review-line: #d5cbe7;
}

.reviews-section--ai {
  --review-surface: #f4dfd3;
  --review-light: #fff5ed;
  --review-line: #e9cebe;
}

.reviews-heading { text-align: center; }
.reviews-heading p { max-width: 52ch; margin: 14px auto 0; color: var(--muted); }
.reviews-scene {
  display: grid;
  grid-template-columns: minmax(112px, 1fr) minmax(260px, 2.55fr) minmax(112px, 1fr);
  align-items: center;
  gap: 8px 20px;
  max-width: 1010px;
  margin: 20px auto 0;
}
.reviews-quotes { display: grid; align-content: space-evenly; gap: 20px; align-self: stretch; }
.reviews-quotes--left { transform: rotate(-4deg); }
.reviews-quotes--right { transform: rotate(3deg); }
.reviews-quote {
  display: block;
  min-height: 44px;
  padding: 7px 2px;
  color: var(--ink);
  font: italic 400 clamp(17px, 2.15vw, 26px)/1.25 Lora, Georgia, serif;
  text-decoration: none;
  text-underline-offset: 4px;
  text-wrap: pretty;
}
.reviews-quote q { quotes: "«" "»"; }
.reviews-quote:hover { text-decoration: underline; }
.reviews-quote--bottom { grid-column: 2; justify-self: center; text-align: center; }

.reviews-desk {
  position: relative;
  isolation: isolate;
  min-width: 0;
  height: clamp(270px, 36vw, 367px);
  overflow: hidden;
}
.reviews-paper {
  position: absolute;
  z-index: var(--layer);
  display: grid;
  align-items: center;
  width: var(--paper-width);
  min-height: 48px;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--angle));
  padding: 8px;
  border: 1px solid #ded4c5;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 4px 9px #36282023, 0 13px 22px #36282015;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.reviews-paper img { width: 100%; height: auto; pointer-events: none; }
.reviews-paper:hover, .reviews-paper.is-dragging { box-shadow: 0 11px 24px #36282042; }
.reviews-paper.is-dragging { cursor: grabbing; }
.reviews-paper:focus-visible { z-index: 999; }
.reviews-desk[hidden] { display: none; }
.reviews-scene:has(.reviews-desk[hidden]) { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.reviews-scene:has(.reviews-desk[hidden]) .reviews-quote--bottom { grid-column: 1 / -1; }

.review-reader .reader-image img { height: auto; }
.review-reader .reader-footer { gap: 10px; }
.review-reader .review-nav {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #bcb6bf;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
}
.review-reader .review-count { min-width: 44px; text-align: center; }
.review-reader .zoom-button { margin-left: auto; }

@media (max-width: 720px) {
  .reviews-section { margin-inline: 12px; border-radius: 27px; }
  .reviews-scene { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .reviews-desk { grid-column: 1 / -1; grid-row: 1; max-width: 500px; width: 100%; justify-self: center; }
  .reviews-quotes { align-content: start; gap: 9px; transform: none; }
  .reviews-quote--bottom { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  .review-reader .reader-footer { padding-inline: 12px; gap: 5px; }
  .review-reader .zoom-button { padding-inline: 10px; }
}