/* Clerestory lesson. All rules scoped under .cl-* */
.cl-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; }
.cl-tag.cl-mid { transform: translateX(-50%); }
.cl-tag.cl-gold { color: var(--gold); } .cl-tag.cl-red { color: #FF8A8A; }
.cl-figbox { position: relative; margin-bottom: 18px; }
.cl-tick { stroke: var(--line-strong); stroke-width: 1; }
.cl-grd { stroke: var(--line-strong); stroke-width: 2; }

/* ---- the hall in section: one sun, one band of window ---- */
.cl-hall { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.cl-sec { width: min(100%, 300px, 46vh); height: auto; display: block; }
.cl-room { fill: #0c1020; }
.cl-wall, .cl-awall, .cl-pier { fill: #5d5648; stroke: #2b2721; stroke-width: 1.2; }
.cl-slab { fill: #3d4a57; }
.cl-aroof { stroke: #3d4a57; stroke-width: 5; stroke-linecap: round; }
.cl-avoid { fill: #171d31; }
.cl-awin { fill: var(--gold); opacity: .5; }
.cl-win { fill: var(--gold); opacity: .9; transition: y .25s, height .25s; }
.cl-win.off { opacity: 0; }
.cl-beam { fill: rgba(252,192,80,.34); transition: opacity .3s; }
.cl-beam.off { opacity: 0; }
.cl-man circle { fill: var(--text); }
.cl-man path { stroke: var(--text); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.cl-sun circle { fill: var(--gold); }
.cl-sun path { stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.cl-aisle { transition: opacity .5s; }
.cl-aisle.off { opacity: 0; }
/* the three window bands of the aisle beat: a wide transparent hit area, the glass inside it */
.cl-band { cursor: pointer; transform-box: fill-box; transform-origin: center; }
.cl-band .hit { fill: transparent; }
.cl-band .glass { fill: var(--gold); opacity: .55; }
.cl-band.wrong .glass { fill: var(--red); opacity: .8; }
.cl-band.off { opacity: .45; pointer-events: none; }
.cl-band.right .glass { opacity: 1; filter: drop-shadow(0 0 7px rgba(252,192,80,.9)); }
.cl-badge { min-height: 18px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.cl-badge.ok { color: var(--gold); }

/* ---- the wall from inside: arcade, triforium, clerestory ---- */
.cl-elev { width: 100%; height: auto; display: block; }
.cl-elevwrap { width: min(100%, 300px); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.cl-dark { fill: #0c1020; stroke: #2b2721; stroke-width: 1; }
.cl-glass { fill: var(--gold); opacity: .85; transition: opacity .3s; }
.cl-course { stroke: #2b2721; stroke-width: 1.5; }
.cl-vault { fill: none; stroke: #6b6256; stroke-width: 6; stroke-linecap: round; }
.cl-lit .cl-glass { filter: drop-shadow(0 0 6px rgba(252,192,80,.85)); }
.cl-lit .cl-pier { fill: #7b7361; }

/* ---- photos ---- */
.cl-plate img { filter: sepia(.42) brightness(.95) drop-shadow(0 12px 20px rgba(0,0,0,.5)); border-radius: 6px; }
.cl-lift { margin-bottom: 44px; }
.figure.cl-fig { width: min(100%, 320px); }

@media (max-height: 700px) {
  .cl-sec { width: min(100%, 268px, 38vh); }
  .cl-elevwrap { width: min(100%, 250px); }
  .figure.cl-fig { width: min(100%, 280px); }
}

/* three houses */
.choices.cl-houses .choice { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 6px 14px 6px 8px; min-height: 64px; }
.choices.cl-houses .cl-house { width: 92px; flex: none; }
.cl-house { height: auto; display: block; }
.cl-hwall { fill: #1a2030; stroke: #8a8072; stroke-width: 2.5; stroke-linejoin: round; }
.cl-hroof { fill: none; stroke: #a8b0bf; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cl-hwin { fill: #9ec4ff; }
.cl-hbeam { fill: var(--gold); opacity: 0; transition: opacity .5s; }
.cl-lit .cl-hbeam { opacity: .75; }
.cl-hdot { fill: #eae3d7; }