/* Reviews round 7 · B "Fresh Paint": quotes lettered onto a clapboard wall by brush, signed, then rolled over for the next. */
.rb-hero { padding: calc(var(--head-h) + 60px) 0 100px; }
.rb-hero__head { display: grid; grid-template-columns: 1fr .8fr; gap: 50px; align-items: end; margin-bottom: 40px; }
.rb-hero__head .lede { margin: 0; }
.rb-wall { --wall: #f3eee4; position: relative; min-height: 470px; padding: clamp(36px, 5vw, 70px); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  background: repeating-linear-gradient(180deg, transparent 0 58px, rgba(0, 0, 0, .07) 58px 60px, rgba(255, 255, 255, .55) 60px 61px), linear-gradient(180deg, #f7f3ea, var(--wall));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 40px 70px -50px rgba(0, 0, 0, .5); }
.rb-wall__quote { position: relative; z-index: 1; max-width: 21em; font: 400 clamp(30px, 3.7vw, 58px)/1.14 var(--serif); font-style: italic; letter-spacing: -.01em; color: var(--ink-c, #24324f); }
.rb-wall__quote .rb-line { display: block; clip-path: inset(-10% 100% -20% 0); }
.rb-wall__sign { position: relative; z-index: 1; margin: 28px 0 0; font: 700 clamp(20px, 1.8vw, 26px)/1 var(--display); font-variation-settings: "wdth" 88; color: var(--ink-c, #24324f); clip-path: inset(-20% 100% -40% 0); }
.rb-wall__sign small { margin-left: 10px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.rb-wall__brush { position: absolute; z-index: 3; left: 0; top: 0; opacity: 0; transform-origin: 17px 6px; transform: rotate(-30deg); pointer-events: none; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .25)); }
.rb-wall__paint { fill: var(--c, #24324f); }
.rb-wall__coat { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 100%; transform: translateY(-101%); background: linear-gradient(180deg, #f7f3ea, var(--wall)); pointer-events: none; }
.rb-wall__coat i { position: absolute; left: -2%; right: -2%; bottom: -22px; height: 44px; border-radius: 22px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 7px), linear-gradient(180deg, #faf7f0, #ddd6c6); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .35); }
.rb-wall__tag { position: absolute; z-index: 1; right: 22px; top: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 99px; background: #fff; font: 600 12px/1 var(--sans); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .3); }
.rb-wall__tag i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.rb-names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rb-names button { position: relative; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 600 13.5px/1 var(--sans); color: var(--ink); overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; }
.rb-names button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.rb-names button b { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); transform-origin: left; transform: scaleX(var(--p, 0)); }
.rb-names button[aria-current="true"] { box-shadow: 0 0 0 2px var(--c); }

.rb-themes { padding: 110px 0; background: #fff; }
.rb-words { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 40px 0 34px; }
.rb-words button { position: relative; padding: 4px 10px; border: 0; background: none; font: 800 clamp(34px, 5vw, 76px)/1 var(--display); font-variation-settings: "wdth" 82; letter-spacing: -.035em; color: rgba(17, 19, 22, .18); isolation: isolate; transition: color .4s; }
.rb-words button::before { content: ""; position: absolute; inset: 8% -4% 2%; z-index: -1; background: var(--c); -webkit-mask: url(/assets/brush-stroke.svg) no-repeat left center / 0% 100%; mask: url(/assets/brush-stroke.svg) no-repeat left center / 0% 100%; transition: -webkit-mask-size .7s cubic-bezier(.6, 0, .25, 1), mask-size .7s cubic-bezier(.6, 0, .25, 1); }
.rb-words button[aria-selected="true"] { color: var(--fg, #fff); }
.rb-words button[aria-selected="true"]::before { -webkit-mask-size: 118% 100%; mask-size: 118% 100%; }
.rb-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-height: 180px; }
.rb-proof figure { margin: 0; padding: 22px; border-radius: 18px; background: #f7f4ee; border-left: 6px solid var(--c); }
.rb-proof blockquote { margin: 0 0 14px; font: 400 21px/1.3 var(--serif); font-style: italic; }
.rb-proof figcaption { font: 600 13px/1 var(--sans); color: var(--muted); }

.rb-all { padding: 110px 0; }
.rb-all__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.rb-all__head { position: sticky; top: 120px; }
.rb-all__head .r7-note { margin: 18px 0 28px; }
.rb-links { grid-template-columns: 1fr; }
.rb-links .r7-link { min-height: 150px; }
.rb-rows { display: grid; gap: 10px; }
.rb-row { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.rb-row summary { list-style: none; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; cursor: inherit; }
.rb-row summary::-webkit-details-marker { display: none; }
.rb-row summary i { width: 44px; height: 44px; border-radius: 10px; background: var(--c); }
.rb-row summary b { display: block; font: 700 18px/1.1 var(--display); font-variation-settings: "wdth" 88; }
.rb-row summary span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.rb-row summary em { font-style: normal; font-size: 22px; transition: transform .35s var(--ease); }
.rb-row[open] summary em { transform: rotate(45deg); }
.rb-row p { margin: 0; padding: 0 22px 22px 74px; font-size: 15.5px; line-height: 1.65; }

@media (max-width: 900px) {
  .rb-hero { padding-top: calc(var(--head-h) + 30px); padding-bottom: 70px; }
  .rb-hero__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 26px; }
  .rb-wall { min-height: 420px; padding: 30px 24px 34px; border-radius: 20px; justify-content: flex-start; padding-top: 70px; }
  .rb-wall__tag { left: 20px; right: auto; top: 18px; }
  .rb-names { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .rb-names button { flex: none; }
  .rb-themes, .rb-all { padding: 80px 0; }
  .rb-proof { grid-template-columns: 1fr; }
  .rb-all__grid { grid-template-columns: 1fr; gap: 30px; }
  .rb-all__head { position: relative; top: 0; }
  .rb-row p { padding-left: 22px; }
}
/* an open can of the quote's paint, seen from above, in the corner of the wall */
.rb-can { position: absolute; z-index: 1; right: clamp(24px, 4vw, 60px); bottom: clamp(24px, 4vw, 54px); width: clamp(110px, 12vw, 170px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 0 74%, #b9bcc2 74% 78%, #e8e9ec 78% 84%, #a4a7ad 84% 88%, #d3d5d9 88%); box-shadow: 0 20px 34px -16px rgba(0, 0, 0, .45); }
.rb-can i { position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .55), transparent 28%), var(--c, #24324f); transition: background-color .6s; }
.rb-can::after { content: ""; position: absolute; left: 50%; top: 92%; width: 12px; height: 34px; margin-left: -6px; border-radius: 0 0 8px 8px; background: var(--c, #24324f); transition: background-color .6s; }
@media (max-width: 900px) { .rb-can { width: 84px; right: 18px; bottom: 18px; } .rb-can::after { height: 18px; width: 8px; } }