/* The existing Nova scroll reveal contains a live, accessible depth viewer. */
#about .about-subtext { position: static; max-width: 44rem; margin: 12px auto 24px; transform: none; translate:none; }
#about .about-image { background: var(--dr-deep); }
dr-depth-cards { display: flex; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); flex-direction: column; justify-content: center; width: 100vw; height: 100dvh; min-height: 350px; color: var(--dr-ink); padding: 70px 5vw 45px; }
.dr-depth-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1100px; width: 100%; margin: 0 auto 40px; font: 14px/1.5 var(--font-body, sans-serif); }
.dr-depth-toolbar p { margin: 0; color: var(--dr-ink); }
.dr-depth-toolbar p span { display: block; font-size: 12px; color: var(--dr-muted); }
.dr-depth-pause, .dr-depth-mobile-nav button { padding: 10px 14px; border: 1px solid #477a76; color: var(--dr-ink); font-size: 13px; cursor: pointer; white-space: nowrap; background: var(--dr-surface); }
.dr-depth-pause:hover,.dr-depth-mobile-nav button:hover { border-color: var(--dr-energy); }
.dr-depth-stage { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(24px,4vw,60px); max-width: 1100px; width: 100%; margin: 0 auto; perspective: 1400px; }
.dr-depth-card { position: relative; min-width: 0; transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style: preserve-3d; touch-action: pan-y; cursor: grab; }
.dr-depth-card:active { cursor: grabbing; }
.dr-depth-card:focus-visible { outline: 2px solid var(--dr-energy); outline-offset: 12px; }
.dr-depth-card[hidden] { display: none; }
.dr-depth-art { position: relative; width: 100%; aspect-ratio: 1; background: var(--dr-surface); box-shadow: 0 14px 24px #0005; }
.dr-depth-art::after { content:''; position:absolute; inset:-9px; border:15px solid transparent; border-image: url('/dr/ui/corners-gold.webp') 90 / 20px / 0 stretch; pointer-events:none; }
.dr-depth-art img,.dr-depth-art canvas { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dr-depth-art canvas { opacity:0; }
.dr-depth-card[data-state="ready"] canvas { opacity:1; }
.dr-depth-caption { padding:26px 0 0; }
.dr-depth-caption p { font-family: var(--font-general, sans-serif); font-size:11px; text-transform:uppercase; color:var(--dr-muted); margin-bottom:5px; }
.dr-depth-caption h3 { font-family: var(--font-circular-web, sans-serif); font-size:clamp(19px,2vw,27px); line-height:1.15; color:var(--dr-ink); }
.dr-depth-state { display:block; margin-top:8px; font-size:12px; color:var(--dr-gold); }
.dr-depth-mobile-nav { display:none; }
@media(max-width:767px){
 dr-depth-cards { padding:65px 28px 26px; }
 .dr-depth-toolbar { gap:10px; margin-bottom:30px; font-size:13px; max-width:320px; }
 .dr-depth-pause { padding:9px; font-size:12px; }
 .dr-depth-stage { display:block; max-width:min(310px,55dvh); }
 .dr-depth-caption { padding-top:22px; }
 .dr-depth-caption h3 { font-size:23px; }
 .dr-depth-mobile-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:310px; margin:24px auto 0; }
 .dr-depth-mobile-nav p { font-size:13px; color:var(--dr-muted); }
}
@media(min-width:768px) and (max-height:650px){dr-depth-cards{padding:55px 6vw 20px}.dr-depth-stage{max-width:850px}.dr-depth-toolbar{margin-bottom:20px}.dr-depth-art{max-width:42vh}.dr-depth-caption{padding-top:14px}}
@media(prefers-reduced-motion:reduce){.dr-depth-card{transform:none}}