.hero h1 {
  max-width: 12.5ch;
  font-size: clamp(2.8rem, 5.8vw, 5.8rem);
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(2.7rem, 10.8vw, 3.95rem);
  }
}

.reviews {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) 2fr;
  gap: clamp(36px, 8vw, 130px);
  align-items: center;
  padding: clamp(58px, 8vw, 110px) clamp(20px, 9vw, 145px);
  background: var(--sand);
}
.review-summary h2 { margin: 0 0 22px; font-size: clamp(2.1rem, 3.8vw, 4rem); }
.review-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Aggregate rating spans the full grid width so it sits on its own row above the three
   quote cells instead of consuming the first one (renderReviews in app.js emits it as the
   first child of .review-list, a sibling of the blockquotes, not a wrapper around them). */
.reviews-aggregate { grid-column: 1 / -1; margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--brand); font: 700 1.1rem/1.3 var(--font-heading); }
.review-list blockquote { margin: 0; padding-top: 18px; border-top: 1px solid #b9aa92; font: 700 1.14rem/1.45 var(--font-heading); }
.review-list blockquote::before { content: "★★★★★"; display: block; margin-bottom: 13px; color: var(--accent); font-size: .78rem; letter-spacing: .12em; }
.review-list cite { display: block; margin-top: 18px; color: var(--muted); font-size: .76rem; font-weight: 700; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
/* .sample-badge lives in shared/tokens.css now (shared with the hub); this file no longer
   duplicates the rule. tokens.css is linked before this sheet, so cascade order is safe. */
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .reviews { padding: 52px 20px; } .review-list { grid-template-columns: 1fr; gap: 26px; } }
.map-link { display: inline-block; margin: 5px 0; color: #fff; font-weight: 700; }

/* Task 13 (screenshot review): .reel-line sits in white text (site/styles.css) directly on
   top of .reel-frame's photo with no scrim of its own -- unlike .hero, which pairs its white
   copy with .hero-wash for guaranteed contrast. That gap was invisible until the seed venue's
   placeholder gallery images (checks/lib/make-placeholders.mjs uses palette.bg, a light
   cream, for gallery-2/3 -- the two images site/app.js's hydrateSiteChrome() feeds into this
   section) made "Good food, good music, good company." nearly illegible: white-on-cream. A
   dark photo would mostly avoid this, but the template should not depend on every future
   venue's photography landing dark exactly where the copy sits -- so give .reel-sticky the
   same kind of directional scrim .hero-wash provides, on its own layer between the frames and
   the text so it survives the frame-swap clip-path transition unchanged. */
.reel-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, #04182bc0 0%, #04182b66 42%, #04182b14 72%, transparent 100%);
}
.reel-line { z-index: 2; }