.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px}
.layers a{text-decoration:none;border-top:3px solid var(--ink);padding:8px 0}
.layers b{display:block;font:600 12px 'Stack Sans';letter-spacing:.2em}
.layers span{font:italic 400 18px 'Stack Serif';color:var(--mut)}
.layer{margin-top:56px;border-top:3px solid var(--ink);padding-top:10px}
.layer h2{font:600 13px 'Stack Sans';letter-spacing:.24em;margin:0 0 6px}
.layer h2 small{font:italic 400 20px 'Stack Serif';letter-spacing:0;color:var(--mut);margin-left:10px}
.piece{padding:22px 0 26px;border-bottom:1px solid #cfc6b6;scroll-margin-top:20px}
.piece h3{font:400 40px/1.05 'Stack Serif';margin:0}
.hook{font:italic 400 24px/1.3 'Stack Serif';color:var(--red);margin:8px 0 6px}
.what{margin:0 0 14px;max-width:46em}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:6px 0 16px;font:500 14px 'Stack Mono'}
.flow .n{background:#1d1b18;color:#F3EEE4;border-radius:6px;padding:7px 11px;white-space:nowrap}
.flow .e{display:inline-flex;align-items:center;padding:0 6px;color:var(--red)}
.flow .e::after{content:'→';margin-left:6px;color:var(--ink)}
.flow .e i{font-style:normal;font-size:12px}
.cols{display:grid;grid-template-columns:1.3fr 1fr;gap:34px}
h4{font:600 11px 'Stack Sans';letter-spacing:.22em;text-transform:uppercase;margin:12px 0 4px;color:var(--mut)}
.cols ol{margin:0;padding-left:1.2em}.cols li{margin:4px 0}
.why{font:400 20px/1.35 'Stack Serif';margin:0}
.links a,.try a{color:var(--red)}
.try code{font:13px 'Stack Mono';background:#e9e2d5;padding:3px 6px;border-radius:4px;word-break:break-all}
@media (max-width:720px){.cols{grid-template-columns:1fr;gap:0}.layers{grid-template-columns:1fr 1fr}.piece h3{font-size:34px}}