/* Multimedia page styles — minimal, responsive, accessible. Uses unique mm- prefix to avoid overlap with base.css. */
:root {
  --mm-gap: 1rem;
  --mm-radius: 8px;
  --mm-surface: var(--surface-2, #101414);
  --mm-text: var(--text-1, #e6f0e6);
  --mm-accent: var(--accent-1, #5fbf5f);
  --mm-accent-2: var(--accent-2, #3b7a3b);
  --mm-border: color-mix(in oklab, var(--mm-accent) 35%, #000);
}

.mm-main { padding-block: 1rem 3rem; }

/* Hero */
.mm-hero { display: grid; gap: var(--mm-gap); align-items: center; grid-template-columns: 1.2fr 1fr; padding: clamp(1rem, 2vw, 2rem); }
.mm-hero__content { display: grid; gap: .75rem; }
.mm-eyebrow { font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-accent); }
.mm-hero__lead { color: var(--mm-text); max-width: 60ch; }
.mm-hero__media { margin: 0; border-radius: var(--mm-radius); overflow: clip; box-shadow: 0 0 0 4px var(--mm-border), 8px 8px 0 0 var(--mm-accent-2); }
.mm-hero__media img { display: block; width: 100%; height: auto; }

/* Quick nav chips */
.mm-quick-nav__list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .25rem 0 0; list-style: none; }
.mm-chip { display: inline-block; padding: .5rem .75rem; border: 2px solid var(--mm-border); border-radius: 999px; color: var(--mm-text); background: color-mix(in oklab, var(--mm-surface) 85%, #1a1f1a); text-decoration: none; }
.mm-chip:focus-visible, .mm-chip:hover { outline: none; background: color-mix(in oklab, var(--mm-accent) 20%, var(--mm-surface)); }

/* Sections */
.mm-section { padding: clamp(1.25rem, 2vw, 2rem); display: grid; gap: 1rem; }
.mm-section__header { display: grid; gap: .25rem; }
.mm-section__header h2 { margin: 0; }

/* Grid */
.mm-grid { display: grid; gap: var(--mm-gap); }
.mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cards */
.mm-card { background: color-mix(in oklab, var(--mm-surface) 90%, #091009); border: 2px solid var(--mm-border); border-radius: var(--mm-radius); overflow: clip; display: grid; }
.mm-card__link { color: inherit; text-decoration: none; display: grid; height: 100%; }
.mm-card__body { padding: .875rem .875rem 1rem; display: grid; gap: .375rem; }
.mm-card--media .mm-media-thumb { aspect-ratio: 16 / 9; background: #0d0f0d; }

/* Media thumbs */
.mm-media-thumb { margin: 0; position: relative; overflow: hidden; }
.mm-media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-play { position: absolute; inset: auto auto 8px 8px; width: 42px; height: 42px; background: var(--mm-accent); clip-path: polygon(28% 20%, 28% 80%, 80% 50%); box-shadow: 0 0 0 3px var(--mm-border); }

/* Buttons */
.mm-btn { --_bg: var(--mm-accent); --_fg: #081108; display: inline-block; color: var(--_fg); background: var(--_bg); border: 2px solid var(--mm-border); padding: .6rem .9rem; border-radius: .5rem; text-decoration: none; font-weight: 600; }
.mm-btn:hover, .mm-btn:focus-visible { filter: brightness(1.05); outline: none; }
.mm-btn--ghost { --_bg: transparent; --_fg: var(--mm-text); background: linear-gradient(0deg, transparent, transparent); }
.mm-btn--small { padding: .4rem .7rem; font-size: .9rem; }
.mm-btn--inline { padding: .25rem .55rem; font-size: .9rem; }

.mm-cta-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }

/* Lists */
.mm-list { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.mm-list--episodes .mm-episode { display: grid; gap: .5rem; align-items: center; grid-template-columns: 1fr auto; background: color-mix(in oklab, var(--mm-surface) 92%, #0c0f0c); border: 2px solid var(--mm-border); border-radius: var(--mm-radius); padding: .75rem; }
.mm-episode__title { margin: 0 0 .125rem; }
.mm-episode__meta { margin: 0; opacity: .8; }

/* Tabs */
.mm-tabs { display: inline-flex; gap: .5rem; margin-bottom: .5rem; }
.mm-tab { background: color-mix(in oklab, var(--mm-surface) 85%, #151b15); color: var(--mm-text); border: 2px solid var(--mm-border); padding: .5rem .75rem; border-radius: .5rem; cursor: pointer; }
.mm-tab.is-active { background: color-mix(in oklab, var(--mm-accent) 22%, var(--mm-surface)); }
.mm-panels { border-left: 4px solid var(--mm-border); padding-left: .75rem; }

/* Sim blocks */
.mm-sim { display: grid; gap: .5rem; background: repeating-linear-gradient(135deg, rgba(95,191,95,.06) 0 10px, rgba(0,0,0,.06) 10px 20px); border: 2px solid var(--mm-border); border-radius: var(--mm-radius); padding: .9rem; }
.mm-sim__desc h3 { margin: 0 0 .25rem; }

/* Form */
.mm-form { display: grid; gap: .75rem; max-width: 720px; }
.mm-form__row { display: grid; gap: .35rem; }
.mm-form input[type=email] { background: #0f140f; color: var(--mm-text); border: 2px solid var(--mm-border); border-radius: .5rem; padding: .55rem .65rem; }
.mm-fieldset { display: grid; gap: .35rem; border: 2px dashed var(--mm-border); border-radius: .5rem; padding: .5rem .65rem; }
.mm-check { display: inline-flex; align-items: center; gap: .5rem; }
.mm-help { opacity: .8; font-size: .925rem; }

/* Responsive */
@media (max-width: 1000px) {
  .mm-hero { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .mm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mm-grid--2, .mm-grid--3 { grid-template-columns: 1fr; }
  .mm-list--episodes .mm-episode { grid-template-columns: 1fr; }
}