/* Demos index follows the portfolio's Clients section grid and typography. */
.demos-index { border-top: .5px solid var(--color-border); padding-top: 16px; width: 100%; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; color: var(--color-text); }
.demos-index h2, .demos-date { margin: 0; font-family: 'Aspekta 400', sans-serif; font-size: 20px; font-weight: 400; line-height: 24px; }
.demos-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-width: 0; }
.demo-preview { position: relative; margin: 0; width: 100%; aspect-ratio: 1; overflow: hidden; pointer-events: none; }
.demo-preview[hidden] { display: none; }
.demo-preview canvas { display: block; width: 100%; height: 100%; }
.demos-list { list-style: none; margin: 0; padding: 0; min-width: 0; }
.demos-list li { margin: 0; padding: 0; }
.demos-list a, .demos-list span { display: block; color: inherit; font-family: 'Inter Display SemiBold', sans-serif; font-size: clamp(40px, 6.5vw, 128px); font-weight: 600; line-height: .98; letter-spacing: -.055em; text-decoration: none; overflow-wrap: anywhere; }
.demos-list a { transition: opacity .2s; }
.demos-list a:hover { opacity: .65; }
.demos-list a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.demos-list small { display: inline-block; vertical-align: middle; font-family: 'Aspekta 400', sans-serif; font-size: 12px; line-height: 1.3; font-weight: 400; letter-spacing: 0; margin-left: 10px; }
@media (max-width: 1199px) { .demos-index h2, .demos-date { font-size: 16px; line-height: 20px; } }
@media (max-width: 809px) {
 .demos-index { grid-template-columns: 1fr 1fr; row-gap: 32px; }
 .demos-intro { display: contents; }
 .demos-intro h2 { grid-column: 1; grid-row: 1; }
 .demos-date { grid-column: 2; grid-row: 1; }
 .demos-list { grid-column: 1 / -1; grid-row: 2; }
 .demos-list a, .demos-list span { font-size: clamp(40px, 10vw, 80px); }
 .demo-preview { grid-column: 1; grid-row: 3; }
}
/* Preview is a desktop enhancement; tablet and phone retain direct demo links. */
@media (max-width: 1199px) { .demo-preview { display: none !important; } }
/* Globe demo: an in-flow stage; the globe fits the shorter side and can be dragged. */
.globe { position: relative; margin: 0 0 48px; padding: 0; width: 100%; height: clamp(360px, 82vh, 1100px); }
.globe canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.globe[data-dragging] canvas { cursor: grabbing; }
.globe[data-renderer="static"] canvas { cursor: default; }
.globe-credit { position: absolute; left: 0; bottom: 0; margin: 0; color: var(--color-text); font-family: 'Aspekta 400', sans-serif; font-size: 12px; line-height: 1.4; }
.globe-credit a { color: inherit; }