/* ═══════════════════════════════════════════════════
   MUSIC2DANCE — from data to dance, four clips in a row
═══════════════════════════════════════════════════ */
.m2d-strip { grid-column: 1 / -1; width: 100%; margin-top: clamp(20px, 4vh, 40px); }
.m2d-label {
    font-family: 'Space Mono', ui-monospace, Menlo, monospace;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #141414;
    margin: 0 0 14px;
}
.m2d-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
.m2d-grid figure { margin: 0; min-width: 0; }
.m2d-grid video {
    display: block; width: 100%; height: auto; aspect-ratio: 2 / 3;
    object-fit: cover; background: #0d0f12;
}
.m2d-grid figcaption { margin-top: 8px; font-size: .85rem; line-height: 1.4; color: #3a3833; }
.m2d-grid figcaption b {
    font-family: 'Space Mono', ui-monospace, Menlo, monospace; font-weight: 700;
    margin-right: 6px; color: #141414;
}
@media (max-width: 760px) { .m2d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* toggle: a quiet text link */
.m2d-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Space Mono', ui-monospace, Menlo, monospace;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    color: #111; background: none; border: 0; padding: 4px 0; cursor: pointer;
    border-bottom: 1px solid rgba(17, 17, 17, .3); transition: border-color .2s;
}
.m2d-toggle span { font-size: .95rem; line-height: 1; }
.m2d-toggle:hover, .m2d-toggle[aria-expanded="true"] { border-bottom-color: #111; }
.m2d-toggle:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.m2d-grid { margin-top: 18px; }
.m2d-grid[hidden] { display: none; }

/* final result: square video in the project */
.ai-project-video-wrap video.m2d-final { display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #000; margin: 0 auto; }

/* SILENCE IN MANHATTAN — square explanation video */
.sim-project .ai-project-video-wrap video { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #000; margin: 0 auto; }
.sim-project .ai-project-title { color: #111; }
.sim-project em { font-style: italic; color: #111; }
@media (max-width: 900px) { .sim-project { grid-template-columns: 1fr; gap: 28px; } }

/* EXPLAIN — the "how I made it" video, and the Instagram/TikTok note */
.m2d-explain { margin: 0 0 24px; max-width: 420px; }
.m2d-explain figcaption {
    font-family: 'Space Mono', ui-monospace, Menlo, monospace; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .06em; color: #111; margin-bottom: 10px;
}
.m2d-explain video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #000; }
.ai-social-note { font-size: .92rem; color: #6d6a64; }
.ai-social-note a { color: #111; text-decoration: underline; text-decoration-color: rgba(17,17,17,.3); text-underline-offset: 3px; }
.ai-social-note a:hover { text-decoration-color: #111; }

/* SIM RESULT — the map recording, landscape */
.sim-project .ai-project-video-wrap video.sim-result { aspect-ratio: 3 / 2; max-width: none; object-fit: cover; }

/* TOGGLES — two quiet links side by side, panels open underneath */
.m2d-toggles { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.m2d-panel { margin-top: 18px; }
.m2d-panel[hidden] { display: none; }
.m2d-panel .m2d-explain { margin: 0; }

/* SIM STEPS — four images, same squares as the dance steps */
.sim-steps img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #f1efeb; cursor: zoom-in; }

/* CENTRED TABS — toggles and the process video sit in the middle */
.m2d-toggles { justify-content: center; }
.m2d-panel .m2d-explain { margin: 0 auto; }