/* Video guides: film cards, used on /guides/video-guides and on the tool pages. */
.vg-embed,.vg-wrap{max-width:1060px;margin-inline:auto}
.vg-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:34px 30px;margin-top:6px}
.vg-film{margin:0;min-width:0}
.vg-media{position:relative;aspect-ratio:16/9;background:#1d1d1f;border:2px solid var(--ink,#1d1d1f);box-shadow:6px 6px 0 var(--ink,#1d1d1f);overflow:hidden}
.vg-media video{display:block;width:100%;height:100%;object-fit:cover;background:#1d1d1f}
.vg-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;
 background:var(--orange,#fb7701);color:var(--ink,#1d1d1f);border:2px solid var(--ink,#1d1d1f);box-shadow:4px 4px 0 var(--ink,#1d1d1f);transition:transform .15s,box-shadow .15s}
.vg-play:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink,#1d1d1f)}
.vg-play svg{width:30px;height:30px;margin-left:4px}
.vg-play[hidden]{display:none}
.vg-film figcaption{margin-top:16px}
.vg-film figcaption strong{display:block;font-family:var(--display,inherit);font-size:21px;line-height:1.2;letter-spacing:-.02em}
.vg-film figcaption span{display:block;margin-top:4px;color:#4f4b45;font-size:16px;line-height:1.5}
.vg-dur{margin-top:6px;font-family:var(--mono,monospace);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#6b5f52}
.vg-more{margin-top:22px!important}
.vg-card{padding:0;margin:0}
.vg-card+.vg-card{margin-top:64px}
.vg-card h2{margin:0 0 6px!important}
.vg-card .vg-desc{max-width:60ch;color:#3d3a35}
.vg-card .vg-media{max-width:880px}
.vg-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0}
.vg-text{max-width:880px;margin-top:16px;border-top:1px solid var(--rule,#d9d2c8);border-bottom:1px solid var(--rule,#d9d2c8)}
.vg-text summary{cursor:pointer;padding:14px 0;font-family:var(--mono,monospace);font-size:12px;letter-spacing:.14em;text-transform:uppercase;list-style:none}
.vg-text summary::-webkit-details-marker{display:none}
.vg-text summary::after{content:"+";float:right;font-size:18px}
.vg-text[open] summary::after{content:"\2212"}
.vg-text div{padding:0 0 18px}
.vg-text p{max-width:70ch}
.vg-band{padding:56px 0 0}
@media(max-width:650px){.vg-play{width:64px;height:64px}.vg-film figcaption strong{font-size:19px}.vg-card+.vg-card{margin-top:48px}}