/* Reviews hung as framed pictures on a plaster wall.
   Used by the reviews wall and service testimonials. Each review is one object: a moulded frame,
   a cream mat with a bevelled window holding the words, and the credit written on the mat
   below the window, the way a matted print carries its title and signature.
   Colours come from the reviews page: frame green #39443a (as on the hero picture),
   mat #fffdf7, brass #a68b51 / #765c2c, text #2b2a26 / #555b50. */

/* #all is styled by studio-personal-pages.css; the id is needed to outrank its background. */
.studio #all.rv-gallery { background:#efe9dd; padding-bottom:88px; }

.studio .rv-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.studio .rv-heading .eyebrow { margin-bottom:14px; }
.studio .rv-heading h2 { font-size:clamp(32px,3.1vw,44px); margin:0; }
.studio .rv-summary { margin:0; padding-left:18px; border-left:2px solid #bca579; font:400 1.3rem/1.3 var(--display); color:#2b2a26; white-space:nowrap; }
.studio .rv-summary .rv-stars { margin-right:4px; font-size:1.1rem; }
.studio .rv-summary__count { display:block; margin-top:4px; font:600 .7rem/1.4 var(--body); text-transform:uppercase; letter-spacing:.16em; color:#765c2c; }

.studio .rv-stars { color:#8a6a1f; letter-spacing:.14em; white-space:nowrap; font-size:.78rem; }
.studio .rv-stars__off { color:#d9cfb9; }

/* ---- The frame ------------------------------------------------------------------------
   The moulding is a gradient lit from the top left, with a darker inner lip where it
   meets the mat. The shadow falls down and slightly right, as under a picture light. */
.studio .rv-frame {
  display:flex; flex-direction:column; margin:0; padding:11px;
  background:linear-gradient(150deg,#56655a 0%,#39443a 38%,#2a332c 100%);
  box-shadow:
    inset 0 0 0 1px #1f2721,
    inset 1px 1px 0 2px #6b7a6e5c,
    0 2px 3px #2a241a33,
    6px 16px 22px -8px #2a241a52,
    10px 30px 44px -26px #2a241a47;
}
.studio .rv-frame--oak {
  background:linear-gradient(150deg,#d2b07a 0%,#b28a52 40%,#94703f 100%);
  box-shadow:
    inset 0 0 0 1px #6f5230,
    inset 1px 1px 0 2px #ecd3a466,
    0 2px 3px #2a241a33,
    6px 16px 22px -8px #2a241a52,
    10px 30px 44px -26px #2a241a47;
}

/* The mat: a shadow where the frame's lip overhangs it, top and left. */
.studio .rv-mat {
  flex:1; display:flex; flex-direction:column; padding:24px 24px 20px; background:#fbf8f0;
  box-shadow:inset 2px 2px 5px #0000002e, inset 0 0 0 1px #00000026;
}

/* The window: a bevel cut into the mat, with a white core edge. */
.studio .rv-frame .rv-window {
  flex:1; display:flex; align-items:center; margin:0; padding:24px 22px;
  background:#fffdf7;
  box-shadow:0 0 0 1px #fffefb, 0 0 0 2px #ddd3c0, inset 1px 1px 3px #0000000f;
}
.studio .rv-frame .rv-window p { margin:0; font:400 1.05rem/1.68 var(--display); color:#2b2a26; text-wrap:pretty; }

/* The credit, on the mat below the window: stars, a signature-style name, then town and work. */
.studio .rv-credit { display:grid; justify-items:center; gap:3px; padding-top:16px; text-align:center; }
.studio .rv-credit__name { font:italic 400 1.12rem/1.3 var(--display); color:#2b2a26; }
.studio .rv-credit__meta { font-size:.66rem; font-weight:600; line-height:1.5; text-transform:uppercase; letter-spacing:.14em; color:#765c2c; }

/* Short words get a larger, centred line, like a caption print. */
.studio .rv-frame--short .rv-window { justify-content:center; text-align:center; padding:30px 26px; }
.studio .rv-frame--short .rv-window p { font:italic 400 1.4rem/1.45 var(--display); }

/* The featured review: the same object, larger, hung alone above the wall. */
.studio .rv-feature { display:flex; justify-content:center; margin-top:44px; }
.studio .rv-frame--feature { width:100%; max-width:880px; padding:14px; }
.studio .rv-frame--feature .rv-mat { padding:clamp(22px,4vw,44px) clamp(22px,4.5vw,52px) clamp(18px,3vw,30px); }
.studio .rv-frame--feature .rv-window { padding:clamp(24px,4vw,44px) clamp(22px,4.5vw,52px); }
.studio .rv-frame--feature .rv-window p { font:italic 400 clamp(1.25rem,2vw,1.7rem)/1.55 var(--display); }
.studio .rv-frame--feature .rv-credit { padding-top:22px; }
.studio .rv-frame--feature .rv-credit__name { font-size:1.3rem; }

/* A single service-page testimonial keeps its frame compact and readable. */
.studio .rv-frame--single { width:100%; max-width:880px; }
.studio .rv-frame--single:not(.rv-frame--short) .rv-window p { font:italic 400 clamp(1.05rem,1.5vw,1.2rem)/1.65 var(--display); }

/* ---- The wall -------------------------------------------------------------------------
   Six columns; a frame takes two, a wide frame four. Each frame keeps the height
   its words need, with room above for its hanging wire. */
.studio .rv-wall { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-flow:row dense; gap:48px 40px; margin-top:64px; }
.studio .rv-wall .rv-frame { grid-column:span 2; }
.studio .rv-wall .rv-frame--wide { grid-column:span 4; }

@media (max-width:1050px) {
  .studio .rv-wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 32px; }
  .studio .rv-wall .rv-frame { grid-column:span 1; }
  .studio .rv-wall .rv-frame--wide { grid-column:1 / -1; }
}
@media (max-width:700px) {
  .studio .rv-heading { display:block; }
  .studio .rv-summary { margin-top:22px; white-space:normal; }
  .studio .rv-feature { margin-top:28px; }
  .studio .rv-wall { grid-template-columns:1fr; gap:32px; margin-top:40px; }
  .studio .rv-wall .rv-frame,
  .studio .rv-wall .rv-frame--wide { grid-column:auto; }
  .studio .rv-frame { padding:9px; }
  .studio .rv-mat { padding:18px 18px 16px; }
  .studio .rv-frame .rv-window { padding:20px 18px; }
}

/* Visible hanging wires and warm plaster give the collection a studio wall. */
.studio #all.rv-gallery {
  background-color:#efe9dd;
  background-image:radial-gradient(#88795b12 .65px,transparent .85px),linear-gradient(105deg,#fffdf72e,transparent 65%);
  background-size:6px 6px,100% 100%;
  overflow:clip;
}
.studio .rv-wall { grid-auto-flow:row; align-items:start; gap:88px 40px; margin-top:92px; }
.studio .rv-frame { position:relative; min-width:0; }
.studio .rv-hanger { position:absolute; top:-60px; left:50%; width:60%; max-width:240px; height:64px; transform:translateX(-50%); color:#776e5e; filter:drop-shadow(1px 2px 1px #4b402c22); pointer-events:none; }
.studio .rv-wall .rv-frame--feature { grid-column:1 / -1; margin-inline:auto; }
.studio .rv-frame .rv-window p::before { content:'“'; }
.studio .rv-frame .rv-window p::after { content:'”'; }
.studio .rv-credit__meta { overflow-wrap:anywhere; }
.studio .rv-frame--burgundy { background:linear-gradient(150deg,#a36564,#793b3e 42%,#54262a); }
.studio .rv-wall .rv-frame--oak { transform:rotate(-.7deg); }
.studio .rv-wall .rv-frame--burgundy { transform:rotate(.6deg); }
.studio .v2-review.rv-single {
  background-color:#efe9dd;
  background-image:radial-gradient(#88795b12 .65px,transparent .85px),linear-gradient(105deg,#fffdf72e,transparent 65%);
  background-size:6px 6px,100% 100%;
  color:#2b2a26;
  padding:64px 0 88px;
  scroll-margin-top:180px;
  overflow:clip;
}
.studio .rv-single .rv-single__wrap { max-width:980px; }
.studio .rv-single__picture { display:flex; justify-content:center; margin-top:60px; }
@media(max-width:1050px) {
  .studio .rv-wall { gap:82px 32px; }
}
@media(max-width:700px) {
  .studio #all.rv-gallery > .wrap { padding-inline:0; }
  .studio .v2-review.rv-single { padding:42px 0 64px; scroll-margin-top:150px; }
  .studio .rv-single .rv-single__wrap { padding-inline:0; }
  .studio .rv-single__picture { margin-top:50px; }
  .studio .rv-wall { gap:78px; margin-top:84px; }
  .studio .rv-wall .rv-frame { transform:none; }
  .studio .rv-hanger { top:-50px; height:54px; max-width:190px; }
  .studio .rv-frame--feature .rv-mat { padding:18px 18px 16px; }
  .studio .rv-frame--feature .rv-window { padding:20px 18px; }
  .studio .rv-frame--feature .rv-window p { font-size:1.2rem; line-height:1.65; }
  .studio .rv-frame--short .rv-window { padding:24px 18px; }
  .studio .rv-credit__meta { font-size:.72rem; letter-spacing:.07em; }
}