.composition-method-article{--method-ink:#303438;--method-paper:#f4f0e8;--method-line:#c9c1b5;--method-accent:#8a5b3d;color:var(--method-ink)}
.composition-method-article>p:first-of-type{font-size:1.18rem;line-height:1.72}
.method-kicker{display:inline-block;margin:4px 0 18px;padding:6px 10px;border-radius:2px;background:#303438;color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.method-section{margin:0 0 48px}
.method-section>h2{margin-bottom:18px;padding-bottom:10px}
.method-section>h3{margin-top:34px}
.method-figure{margin:20px 0 28px;padding:14px;border:1px solid var(--method-line);border-radius:4px;background:#ebe7df}
.method-figure img{display:block;width:100%;max-height:580px;object-fit:contain;background:#fff}
.method-figure figcaption{margin:10px 4px 0;color:#5b6165;font-size:12px;line-height:1.55}
.method-diagram{background:var(--method-paper)}
.method-diagram img{max-height:none}
.method-family{margin:48px 0;padding:28px 30px;border-left:5px solid var(--method-accent);background:var(--method-paper)}
.method-family h2{margin:0 0 8px}
.method-family>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px}
.method-family a,.method-family span{display:block;padding:11px 12px;border:1px solid var(--method-line);border-radius:3px;background:#fff}
.method-family span{color:#716c67}
.method-references{font-size:14px;line-height:1.6}
.method-references li{margin-bottom:9px}
.composition-method-article a:focus-visible{outline:3px solid #006f83!important;outline-offset:3px;border-radius:2px}
@media(max-width:767px){.method-family{padding:22px 20px}.method-family>div{grid-template-columns:1fr}.method-figure{padding:9px}}