/* /exercises pages — reuses the Plum Noir tokens from styles.css */
.ex-page { padding: 40px 0 64px; }
.ex-crumbs { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; }
.ex-crumbs a { color: inherit; text-decoration: none; }
.ex-crumbs a:hover { text-decoration: underline; }
.ex-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; margin-bottom: 28px; }
.ex-hero h1 { margin: 10px 0 12px; }
.ex-hero-img { width: 100%; height: auto; border-radius: 18px; }
.ex-why { margin-top: 14px; padding: 12px 16px; border-left: 3px solid #C93A6B; background: rgba(201, 58, 107, 0.06); border-radius: 6px; }
.ex-flipbook { position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 408; margin: 0 auto 24px; border-radius: 16px; overflow: hidden; background: #3A2540; }
.ex-flipbook img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: ex-flip 2.4s steps(1, end) infinite; }
.ex-flipbook .f1 { animation-delay: 0s; }
.ex-flipbook .f2 { animation-delay: 0.6s; }
.ex-flipbook .f3 { animation-delay: 1.2s; }
@keyframes ex-flip { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
.ex-flipbook .f2 { animation-name: ex-flip-mid; }
@keyframes ex-flip-mid { 0%, 24.9% { opacity: 1; } 25%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ex-flipbook img { animation: none; } .ex-flipbook .f3 { opacity: 1; } }
.ex-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 32px; }
.ex-frames figure { margin: 0; }
.ex-frames img { width: 100%; height: auto; border-radius: 14px; }
.ex-frames figcaption { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; text-align: center; }
.ex-page h2 { margin: 32px 0 10px; }
.ex-steps, .ex-cues { padding-left: 22px; line-height: 1.6; }
.ex-steps li, .ex-cues li { margin-bottom: 8px; }
.ex-intro { margin: 8px 0 24px; padding: 20px 24px; border-radius: 16px; background: rgba(58, 37, 64, 0.05); }
.ex-intro h2 { margin-top: 0; }
.ex-group { margin-top: 40px; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.ex-grid--small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ex-card { display: block; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: transform .15s ease; }
.ex-card:hover { transform: translateY(-2px); }
.ex-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ex-card span { display: block; padding: 10px 12px 2px; font-weight: 600; font-size: 15px; }
.ex-card small { display: block; padding: 0 12px 12px; color: var(--ink-soft); font-size: 12px; }
@media (max-width: 720px) {
  .ex-hero { grid-template-columns: 1fr; }
  .ex-frames { grid-template-columns: 1fr 1fr; gap: 10px; }
}