/* Notre Dame Cathedral lesson. All rules scoped under .nd-* */
.nd-hero { width: min(100%, 320px); margin: 0 auto; }
.nd-hero img { width: 100%; height: auto; display: block; border-radius: 14px; }
.nd-shot img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; }
.nd-photo { position: relative; width: min(100%, 300px); margin: 0 auto; }
.nd-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 0; display: block; border-radius: 14px; }
.nd-tag.nd-onphoto { color: #3a2a0a; background: var(--gold); padding: 2px 8px; border-radius: 8px; }

.nd-box { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.nd-badge { min-height: 18px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.nd-badge.hot { color: #FF8A8A; }
.nd-badge.ok { color: var(--mint); }
.nd-figbox { position: relative; width: min(100%, 380px); padding-bottom: 18px; }
.nd-sec { width: 100%; height: auto; display: block; overflow: visible; }
.nd-tag { position: absolute; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; pointer-events: none; }
.nd-tag.nd-mid { transform: translateX(-50%); }
.nd-tag.nd-gold { color: var(--gold); }
.nd-tag.nd-hot { color: #FF8A8A; }

.nd-attic { fill: #070a14; }
.nd-inside { fill: #141a2e; }
.nd-stone { fill: #5d5648; stroke: #2b2721; stroke-width: 1; }
.nd-pier { fill: #6b6256; }
.nd-ground { stroke: rgba(234,227,215,.28); stroke-width: 2; }
.nd-vault { fill: none; stroke: #a39784; stroke-width: 5; transition: opacity .4s, stroke .4s; }
.nd-vault.strain { stroke: #FF8A8A; }
.nd-vault.broken { stroke: #FF6B6B; stroke-dasharray: 3 7; }
.nd-beam { stroke: #b0843f; stroke-width: 2.2; stroke-linecap: round; fill: none; transition: opacity .5s, transform .6s; }
.nd-beam.gone { opacity: 0; transform: translateY(26px); }
.nd-leadl { stroke: #7d8a96; stroke-width: 4; transition: opacity .6s .6s; }
.nd-leadl.gone { opacity: 0; }
.nd-flame { fill: url(#nd-fireg); opacity: 0; transition: opacity .6s; }
.nd-flame.on { opacity: .9; }
.nd-pile { fill: none; stroke: #7a4a28; stroke-width: 8; opacity: 0; transition: opacity .5s; }
.nd-emb { fill: none; stroke: #E8752A; stroke-width: 3; stroke-dasharray: 2 6; opacity: 0; transition: opacity .5s; }
.nd-pile.on { opacity: 1; }
.nd-emb.on { opacity: .9; }
.nd-heap { fill: #9a5a2e; opacity: 0; transition: opacity .4s .2s; }
.nd-heap.on { opacity: 1; }
.nd-spfill { fill: #6b7a86; }
.nd-spb { stroke: #b0843f; stroke-width: 1.4; fill: none; }
.nd-spire { transition: transform .85s cubic-bezier(.5,0,.9,.4), opacity .3s .6s; }
.nd-spire.fall { transform: translateY(96px); opacity: 0; }
.nd-belfry { fill: #070a14; }
.nd-bglow { fill: url(#nd-fireg); opacity: 0; transition: opacity .5s; }
.nd-bglow.on { opacity: .85; }
.nd-frame { stroke: #b0843f; stroke-width: 2; fill: none; }
.nd-bell { fill: var(--gold); stroke: #2b2721; stroke-width: 1; }
.nd-ghost path { fill: none; stroke: #FF8A8A; stroke-width: 1.4; stroke-dasharray: 3 3; }
.nd-ghost { opacity: 0; transition: transform .9s cubic-bezier(.5,0,.9,.4), opacity .2s; }
.nd-ghost.drop { opacity: 1; transform: translateY(80px); }
.nd-slit { fill: #070a14; }
.nd-man circle { fill: var(--text); }
.nd-man path { stroke: var(--text); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.nd-plane path { fill: #c9d3e0; }
.nd-plane { opacity: 0; transform: translateX(40px); transition: transform .9s ease-out, opacity .4s; }
.nd-plane.in { opacity: 1; transform: translateX(-150px); }
.nd-water { fill: rgba(111,180,255,.55); stroke: #6fb4ff; stroke-width: 1; opacity: 0; transition: transform .7s cubic-bezier(.5,0,.9,.4), opacity .2s; }
.nd-water.drop { opacity: 1; transform: translateY(76px); }
.nd-fw rect { fill: var(--gold); }
.nd-fw { opacity: 0; transition: opacity .5s; }
.nd-fw.on { opacity: 1; }
.nd-mist circle { fill: #6fb4ff; }
.nd-mist { opacity: 0; transition: opacity .6s; }
.nd-mist.on { opacity: .8; }

@media (max-height: 700px) {
  .nd-figbox { width: min(100%, 320px); }
  .nd-hero { width: min(100%, 260px); }
  .nd-photo { width: min(100%, 220px); }
}