/* Review card (review-card.js), shared by /reviews/ and the home page teaser.
   Editorial monochrome: a white sheet or its inverse, a serif-italic quote under an oversized
   opening mark, and the reviewer's generated mark. Its own tokens, so it reads the same on
   either page and on light or dark sections. Only transform and opacity ever animate. */

.rc {
  --rc-bg: #ffffff; --rc-ink: #0a0a0a; --rc-ink-2: #3d3d3d; --rc-muted: #6b6b6b; --rc-line: #d9d9d5;
  --rc-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative; overflow: hidden; display: grid; gap: 20px; align-content: start;
  padding: clamp(24px, 2.6vw, 34px); background: var(--rc-bg); color: var(--rc-ink-2);
  border: 1px solid var(--rc-line);
  transition: border-color .3s var(--rc-ease), box-shadow .45s var(--rc-ease), transform .6s var(--rc-ease);
}
.rc--dark { --rc-bg: #0a0a0a; --rc-ink: #ffffff; --rc-ink-2: #d4d4d4; --rc-muted: #9a9a9a; --rc-line: #2c2c2c; }
.rc > :not(.rc-mark) { position: relative; z-index: 1; }

/* The opening quote mark, oversized and cut by the card's top edge */
.rc-mark { position: absolute; z-index: 0; right: .04em; top: -.3em; font-family: "Libre Baskerville", Georgia, serif; font-style: italic;
  font-size: 168px; line-height: 1; color: var(--rc-ink); opacity: .1; pointer-events: none; user-select: none; }
.rc--lg .rc-mark { font-size: 250px; opacity: .14; }
.rc--dark .rc-mark { opacity: .2; }

.rc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 18px; }
.rc-date { font-size: 12px; letter-spacing: .04em; color: var(--rc-muted); }
.rc-tag { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rc-bg); background: var(--rc-ink); padding: 3px 8px; }

.rc-quote { margin: 0; }
.rc-quote p { margin: 0; font-family: "Libre Baskerville", Georgia, serif; font-style: italic; font-size: 16.5px; line-height: 1.75;
  color: var(--rc-ink); white-space: pre-line; overflow-wrap: anywhere; }
.rc--lg .rc-quote p { font-size: clamp(19px, 1.75vw, 24px); line-height: 1.55; letter-spacing: -.005em; }

.rc-who { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; padding-top: 18px; border-top: 1px solid var(--rc-line); }
.rc-av { display: block; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; color: var(--rc-ink); box-shadow: 0 0 0 1px var(--rc-line); }
.rc-av-paper { fill: var(--rc-bg); }
.rc-av-ink { fill: currentColor; }
.rc-av-disc { fill: var(--rc-ink); stroke: var(--rc-bg); stroke-width: 2.5; }
.rc-av-txt { fill: var(--rc-bg); font-family: "Poppins", system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: -.02em; }
.rc-id { min-width: 0; }
.rc-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--rc-ink); text-transform: none; overflow-wrap: anywhere; }
.rc-role { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--rc-muted); overflow-wrap: anywhere; }

.rc-case { justify-self: start; display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5;
  color: var(--rc-ink); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.rc-case .arr { display: inline-block; transition: transform .2s var(--rc-ease); }
.rc-case:hover .arr { transform: translateX(4px); }
.rc-case:focus-visible { outline: 2px solid #2f6bff; outline-offset: 3px; }

/* Stars: an outline row with a filled row clipped to --pct on top */
.rc-stars { position: relative; display: inline-flex; line-height: 0; color: var(--rc-ink, currentColor); }
.rc-stars-row { display: inline-flex; gap: 3px; }
.rc-stars-row svg { width: var(--star, 15px); height: var(--star, 15px); }
.rc-stars-base svg { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .35; }
.rc-stars-fill { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pct, 100%)) 0 0); }
.rc-stars-fill svg { fill: currentColor; }

/* A light that follows the pointer (reviews.js sets --mx/--my): moved with transform only */
.rc::after { content: ""; position: absolute; z-index: 0; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.07), transparent); pointer-events: none; opacity: 0;
  transform: translate(var(--mx, -999px), var(--my, -999px)); transition: opacity .4s var(--rc-ease); }
.rc--dark::after { background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent); }
.rc.is-lit::after { opacity: 1; }
.rc.is-lit { border-color: var(--rc-ink); box-shadow: 0 34px 60px -34px rgba(0,0,0,.45); transition: border-color .3s var(--rc-ease), box-shadow .45s var(--rc-ease), transform .12s linear; }

@media (prefers-reduced-motion: reduce) {
  .rc, .rc::after, .rc-case .arr { transition: none; }
}