/* Makers Machines — components for merged content (video evidence, specs, interviews) */
/* Extends assets/site.css design tokens: --ink, --ink-2, --paper, --paper-2, --mint, --line, --dark-line */

.mm-media-section{background:var(--ink-2)}
.mm-media-section.on-paper{background:var(--paper);color:var(--ink)}

.mm-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:55px}
.mm-video-card{background:var(--ink-2)}
.mm-video-card video{width:100%;background:#000;display:block}
.mm-video-card .mm-cap{padding:14px 16px;color:#95a89f;font:500 12px Manrope,sans-serif}

.mm-notice{border:1px dashed var(--line);background:#ffffff0d;color:#9fb1a8;padding:22px 26px;margin-top:40px;font-size:13px;line-height:1.7}
.mm-media-section.on-paper .mm-notice{border-color:var(--dark-line);background:#06171408;color:#596963}
.mm-notice strong{color:var(--mint);display:block;margin-bottom:6px;font:600 11px Manrope,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.mm-media-section.on-paper .mm-notice strong{color:#267a59}

.mm-spec-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
.mm-spec-item{background:var(--ink-2);padding:26px 28px}
.mm-spec-item .k{color:var(--mint);text-transform:uppercase;letter-spacing:.1em;font:600 10px Manrope,sans-serif;margin-bottom:8px}
.mm-spec-item .v{font:500 16px Manrope,sans-serif;color:#e7efe9}

.mm-interview-grid{margin-top:55px;display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.mm-interview-card{background:var(--ink-2);padding:34px 36px}
.mm-interview-card h3{font:600 22px Manrope,sans-serif;margin-bottom:4px}
.mm-interview-card .mm-role{color:var(--mint);text-transform:uppercase;letter-spacing:.1em;font:600 10px Manrope,sans-serif;margin-bottom:18px;display:block}
.mm-interview-card video{width:100%;max-width:520px;margin-bottom:16px}
.mm-parts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mm-parts .mm-parts-label{color:#7c8f86;font-size:11px;margin-right:4px}
.mm-parts a{border:1px solid var(--line);color:#c6d2cd;padding:6px 12px;font-size:11px;text-decoration:none}
.mm-parts a:hover{color:var(--mint);border-color:#a9f26a66}

.mm-prototype-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--dark-line);border:1px solid var(--dark-line);margin-top:50px}
.mm-prototype{background:var(--paper-2);padding:32px}
.mm-prototype h3{font:600 20px Manrope,sans-serif;margin-bottom:14px}
.mm-prototype ul{list-style:none}
.mm-prototype li{border-bottom:1px solid var(--dark-line);padding:9px 0;font-size:13px;color:#52625c}
.mm-prototype li:last-child{border-bottom:none}
.mm-prototype .mm-status{margin-top:16px;font:600 10px Manrope,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#267a59}

.mm-badge{display:inline-block;border:1px solid #a9f26a66;color:var(--mint);padding:8px 16px;font:600 10px Manrope,sans-serif;text-transform:uppercase;letter-spacing:.1em;margin-top:20px}

.mm-contact-form{max-width:520px;margin-top:26px;display:flex;flex-direction:column;gap:14px}
.mm-contact-form input,.mm-contact-form textarea{background:#ffffff14;border:1px solid var(--line);color:var(--white);padding:14px 16px;font:14px/1.4 Manrope,sans-serif}
.mm-contact-form textarea{min-height:130px;resize:vertical}
.mm-contact-form button{align-self:flex-start;border:none;cursor:pointer}

.mm-chain{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.mm-chain span{padding:9px 16px;border:1px solid var(--line);font-size:.82rem;color:#aebbb5}
.mm-chain span.on{color:var(--mint);border-color:#a9f26a66;font-weight:600}
.mm-chain .mm-arrow{color:#5f7a70;align-self:center}
.mm-media-section.on-paper .mm-chain span{border-color:var(--dark-line);color:#596963}
.mm-media-section.on-paper .mm-chain span.on{color:#267a59;border-color:#267a5966}
.mm-media-section.on-paper .mm-chain .mm-arrow{color:#b9c2bc}

@media (width<=900px){
  .mm-video-grid{grid-template-columns:repeat(2,1fr)}
  .mm-spec-strip,.mm-prototype-grid{grid-template-columns:1fr}
}
@media (width<=720px){
  .mm-video-grid{grid-template-columns:1fr}
}