/* Romanesque architecture lesson. All rules scoped under .ro-* */
.ro-grd { stroke: var(--line-strong); stroke-width: 2; }
.ro-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; }
.ro-tag.ro-mid { transform: translateX(-50%); } .ro-tag.ro-right { transform: translateX(-100%); }
.ro-tag.ro-gold { color: var(--gold); } .ro-tag.ro-light { color: #c9d2de; }
.ro-figbox { position: relative; }
.ro-verdict { min-height: 18px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: center; }
.ro-verdict.ok { color: var(--mint); } .ro-verdict.no { color: #FF8A8A; }
.ro-stone { fill: #6b6256; stroke: #2b2721; stroke-width: 1.2; }
.ro-arrow { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(216,85,85,.7)); transition: opacity .3s; }
.ro-hit { fill: transparent; }
.ro-quiet { opacity: .45; }

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

/* one arch of wedges */
.ro-archbox { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ro-arch { width: 100%; max-width: 360px; height: auto; display: block; margin: 8px auto 0; }
.ro-vou { fill: #7a7063; stroke: #2b2721; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: transform .8s cubic-bezier(.45,0,.9,.5); }
.ro-afoot { fill: #4a443b; stroke: #2b2721; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: transform .45s ease-out; }
.ro-clamp { fill: var(--gold); }
.ro-clampg { transition: opacity .3s, transform .3s; }
.ro-clampg.gone { opacity: 0; transform: translateY(10px); pointer-events: none; }
.ro-arch.ro-ask .ro-clampg { cursor: pointer; animation: roPulse 1.1s ease-in-out 3; }
@keyframes roPulse { 50% { opacity: .55; } }
.ro-walls { transition: opacity .4s; }
.ro-walls.off, .ro-feetpush.off { opacity: 0; }
.ro-feetpush.held .ro-arrow { stroke: var(--gold); filter: none; }

/* the nave block */
.ro-block-box { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.ro-block { width: min(100%, 340px, 46vh); height: auto; display: block; overflow: visible; }
.ro-open, .ro-vault, .ro-push { transition: opacity .35s; }
.ro-open.off, .ro-vault.off, .ro-push.off { opacity: 0; }
.ro-attic { fill: #151a28; }
.ro-roofp { fill: #3d4a57; stroke: #2b2721; stroke-width: 1; }
.ro-gable { fill: none; stroke: #6b5a3a; stroke-width: 5; stroke-linejoin: round; }
.ro-tie { stroke: #6b5a3a; stroke-width: 3; }
.ro-inside { fill: #070a14; }
.ro-ring { fill: #7a7063; stroke: #2b2721; stroke-width: 1.2; }
.ro-face { fill: #5d5648; stroke: #2b2721; stroke-width: 1.2; transition: fill .4s; }
.ro-flank.pushed .ro-face { fill: #6e4a3f; }
.ro-wall { fill: #5d5648; stroke: #2b2721; stroke-width: 1.2; transition: fill .4s; }
.ro-wall.pushed { fill: #6e4a3f; }
.ro-win { fill: var(--gold); opacity: .85; }
.ro-push { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(216,85,85,.7)); }

/* one wall in section */
.ro-wallbox { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ro-wallsvg { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.ro-tip { transform-box: view-box; transition: transform .5s cubic-bezier(.5,0,.8,.6); }
.ro-tip.over { transform: rotate(9deg); }
.ro-hole { fill: #FCC050; opacity: .9; }
.ro-line { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 6 4; stroke-linecap: round; }
.ro-line.out { stroke: #FF8A8A; }

/* three tunnels */
.ro-cuts { width: min(100%, 340px); margin: 22px auto 26px; }
.ro-cutsvg { width: 100%; height: auto; display: block; }
.ro-sky { fill: #1d2c48; }
.ro-room { fill: #070a14; }
.ro-cut { cursor: pointer; transition: opacity .3s; }
.ro-cut.off { opacity: .5; pointer-events: none; }
.ro-cut.wrong .ro-hit { stroke: var(--red); stroke-width: 2; }
.ro-cut.right .ro-hit { stroke: var(--mint); stroke-width: 2; }
.ro-fan { fill: var(--gold); opacity: 0; transition: opacity .5s; }
.ro-lit .ro-fan { opacity: .7; }

@media (max-height: 700px) {
  .hero.ro-hero img { width: min(100%, 270px); }
  .ro-block { width: min(100%, 290px, 38vh); }
  .ro-wallsvg { max-width: 290px; }
  .ro-cuts { width: min(100%, 290px); margin: 18px auto 20px; }
  .ro-arch { max-width: 300px; }
}