/* Flying buttress lesson. All rules scoped under .fb-* */
.fb-grd { stroke: var(--line-strong); stroke-width: 2; }
.fb-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; }
.fb-tag.fb-mid { transform: translateX(-50%); }
.fb-tag.fb-num { font-family: var(--mono); color: var(--text); text-transform: none; }
.fb-tag.fb-you { color: var(--gold); text-transform: none; }
.fb-tag.fb-gold { color: var(--gold); }
.fb-figbox { position: relative; }
.fb-verdict { min-height: 18px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: center; }
.fb-verdict.ok { color: var(--mint); } .fb-verdict.no { color: #FF8A8A; }

/* the section */
.fb-secbox { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.fb-sec { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.fb-in { fill: #070a14; }
.fb-stone, .fb-vault { fill: #7a7063; stroke: #2b2721; stroke-width: 1.2; }
.fb-glass { fill: var(--gold); opacity: .85; }
.fb-roof { stroke: #5a6878; stroke-width: 5; stroke-linecap: round; }
.fb-pin { fill: #8a8072; stroke: #2b2721; stroke-width: 1.2; }
.fb-aisle, .fb-pierg, .fb-strut, .fb-fly { transition: opacity .4s; }
.fb-aisle.off, .fb-pierg.off, .fb-strut.off { opacity: 0; }
.fb-fly { fill: none; stroke: #8a8072; stroke-width: 9; stroke-linecap: round; }
.fb-fly.off { opacity: 0; }
.fb-strutp { fill: none; stroke: #8a8072; stroke-width: 8; stroke-linecap: round; }
.fb-upper, .fb-pierg { transform-box: view-box; transition: transform .6s cubic-bezier(.5,0,.8,.6); }
.fb-upper.fb-crack .fb-stone { stroke: #FF8A8A; }
.fb-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 6 4; stroke-linecap: round; stroke-linejoin: round; }
.fb-line.out { stroke: #FF8A8A; }
.fb-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)); }
.fb-arrow.in { stroke: var(--gold); filter: none; }
.fb-hitc { fill: transparent; }
.fb-dot { fill: var(--gold); stroke: #0b0f1c; stroke-width: 2; }
.fb-tgt { cursor: pointer; animation: fbPulse 1.1s ease-in-out 3; }
@keyframes fbPulse { 50% { opacity: .5; } }

/* photos */
.fb-lift { margin-bottom: 48px; }

/* the height chart */
.fb-chartwrap { width: min(100%, 320px); margin: 24px auto 0; }
.fb-chart { width: 100%; height: auto; display: block; overflow: visible; }
.fb-bar { fill: rgba(123,92,253,.35); stroke: var(--violet-bright); stroke-width: 1.5; }
.fb-bar.ghost { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 3; }
.fb-you { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 4; }

@media (max-height: 700px) {
  .fb-sec { max-width: 300px; }
  .fb-chartwrap { width: min(100%, 280px); margin-top: 16px; }
}