/* Rib vault lesson. All rules scoped under .rv-* */
.rv-grd { stroke: var(--line-strong); stroke-width: 2; }
.rv-tag { position: absolute; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.rv-tag.rv-mid { transform: translateX(-50%); }
.rv-tag.rv-gold { color: var(--gold); } .rv-tag.rv-dim { color: #b3a894; }
.rv-figbox { position: relative; }
.rv-verdict { min-height: 18px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: center; }
.rv-verdict.ok { color: var(--mint); } .rv-verdict.no { color: #FF8A8A; }

/* the hook photo */
.hero.rv-hero img { width: min(100%, 330px); border-radius: 12px; filter: drop-shadow(0 12px 24px rgba(0,0,0,.5)); }

.rv-bay-box { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.rv-bay-box .gauge { width: min(100%, 300px); }
.rv-bay { width: min(100%, 270px, 38vh); height: auto; display: block; overflow: visible; }
.rv-bay-box .rv-figbox { margin-bottom: 20px; }

.rv-b2, .rv-crease, .rv-rib, .rv-webs, .rv-stone, .rv-epush, .rv-cpush, .rv-mold, .rv-frame, .rv-level, .rv-diag { transition: opacity .4s; }
.rv-b2.off, .rv-crease.off, .rv-rib.off, .rv-webs.off, .rv-stone.off, .rv-epush.off, .rv-cpush.off, .rv-mold.off, .rv-frame.off, .rv-level.off, .rv-diag.off { opacity: 0; }
.rv-cpush { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rv-mold rect { fill: #7a5328; opacity: .85; } .rv-mold .rv-plank { stroke: #4a3218; stroke-width: 1.4; }
.rv-frame { stroke: #9a6a34; stroke-width: 13; stroke-linecap: round; opacity: .9; }
.rv-wall { fill: #5d5648; stroke: #2b2721; stroke-width: 1; transition: fill .5s; }
.rv-wall.glass { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(252,192,80,.8)); }
.rv-pier { fill: #6b6256; stroke: #2b2721; stroke-width: 1.2; transition: fill .4s; }
.rv-pier.lit { fill: var(--gold); filter: drop-shadow(0 0 7px rgba(252,192,80,.9)); }
.rv-crease { stroke: #1c1914; stroke-width: 2; }
.rv-epush { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rv-rib { stroke: #d8cfbf; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.rv-webs { fill: #a89d8a; opacity: .9; transition: opacity .4s, fill .5s; }
.rv-hit { stroke: transparent; stroke-width: 34; cursor: pointer; }
.rv-stone { fill: var(--gold); stroke: #2A1B00; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(252,192,80,.9)); transition: opacity .25s; }

/* where will the stone go */
.rv-tgts { transition: opacity .3s; }
.rv-tgts.off { opacity: 0; pointer-events: none; }
.rv-tgt { fill: rgba(252,192,80,.14); stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; cursor: pointer; }

/* two arches on one baseline */
.rv-fpush { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rv-arch-box { display: grid; place-items: center; width: 100%; }
.rv-arch-box .rv-figbox { width: 100%; margin-bottom: 18px; }
.rv-arch-box .rv-arches { margin: 0 auto; }
.rv-arches { width: min(100%, 360px); height: auto; display: block; overflow: visible; }
.rv-side { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.rv-side.level { filter: drop-shadow(0 0 6px rgba(252,192,80,.8)); }
.rv-diag { fill: none; stroke: #8a8072; stroke-width: 7; stroke-linecap: round; }
.rv-level { stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 5 4; }
.rv-foot { stroke: #8a8072; stroke-width: 2; }

/* the real ceiling */
.figure.rv-fig { width: min(100%, 330px); }

@media (max-height: 700px) {
  .hero.rv-hero img { width: min(100%, 270px); }
  .rv-bay { width: min(100%, 230px, 32vh); }
  .rv-arches { width: min(100%, 320px); }
  .figure.rv-fig { width: min(100%, 290px); }
}