.howto{position:relative;min-height:100vh;overflow:hidden;display:grid;align-content:center;gap:clamp(2rem,6vh,4rem);background:var(--color-sand-100);padding:var(--space-12) clamp(var(--gutter),6vw,7rem)}
.howto__label{position:absolute;left:var(--space-6);top:var(--space-4);z-index:3;font:600 16px/1 system-ui,sans-serif;color:var(--color-peach-700);opacity:.7}
.howto__bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.howto__head{position:relative;z-index:2;margin:0;display:flex;justify-content:center;align-items:center;gap:0 clamp(1rem,1.6vw,1.75rem);font-family:"Amatic SC",var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1;font-size:clamp(3rem,6vw,5.5rem)}
.howto__head-ink{color:var(--color-white);text-shadow:-.045em .045em 0 var(--color-peach-500)}
.howto__head-plate{padding:.02em .25em 0;background:var(--color-peach-400);color:var(--color-white);transform:rotate(-2.5deg)}

.howto__list{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.5rem);width:100%;max-width:76rem;justify-self:center}
.howto__step{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}
.howto__icon{width:clamp(5.5rem,9vw,8rem);height:auto;overflow:visible}
.howto__num{font-family:"Neucha",var(--font-body);font-size:1.125rem;color:var(--color-peach-700)}
.howto__name{margin:0;font-family:"Amatic SC",var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(2.25rem,3vw,2.75rem);line-height:1;color:var(--color-teal-400)}
.howto__text{margin:0;font-family:"Neucha",var(--font-body);font-size:clamp(1.125rem,1.3vw,1.3125rem);line-height:1.35;color:var(--color-teal-800);max-width:15rem}

.howto--cards .howto__step{background:var(--color-cream-50);border-radius:var(--space-6);padding:var(--space-8) var(--space-6);box-shadow:-6px 6px 0 var(--color-sand-300)}

.howto__line{position:absolute;left:12%;right:12%;top:clamp(3.25rem,5vw,4.5rem);height:4px;background:repeating-linear-gradient(90deg,var(--color-white) 0 10px,transparent 10px 24px);border-radius:2px}
.howto__iconwrap{display:grid;place-items:center;width:clamp(6.5rem,10vw,9rem);aspect-ratio:1;border-radius:50%;background:var(--color-cream-50);box-shadow:-5px 5px 0 var(--color-sand-300);position:relative}
.howto__iconwrap .howto__icon{width:65%}

.howto--split{grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;column-gap:clamp(2rem,5vw,6rem)}
.howto--split .howto__head{flex-direction:column;align-items:flex-start;gap:var(--space-2);font-size:clamp(3.5rem,7vw,7rem)}
.howto--split .howto__list{grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vh,2.5rem) clamp(1.5rem,3vw,3rem)}
.howto--split .howto__step{flex-direction:row;align-items:center;text-align:left;gap:var(--space-4)}
.howto--split .howto__icon{flex:none;width:clamp(4.5rem,6.5vw,6rem)}
.howto__body{display:flex;flex-direction:column;gap:.25rem}

.howto .reveal{opacity:0}
.howto--play .reveal{animation:howto-in .5s var(--ease-soft) var(--d,0s) forwards}
@keyframes howto-in{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.howto--play .howto__head-plate.reveal{animation-name:howto-plate}
@keyframes howto-plate{0%{opacity:0;transform:rotate(-2.5deg) scale(.7)}100%{opacity:1;transform:rotate(-2.5deg)}}
@media (prefers-reduced-motion:reduce){.howto .reveal{opacity:1}.howto--play .reveal{animation:none}}
.howto__title{margin:0;position:relative;z-index:2;display:flex;justify-content:center}
.howto__brush{display:block;height:clamp(5rem,9vw,8rem);width:auto;max-width:100%;overflow:visible}
.howto__ink{fill:none;stroke:var(--color-white);stroke-width:19;stroke-linecap:round;stroke-linejoin:round}
.howto__shadow{fill:none;stroke:var(--color-peach-500);stroke-width:19;stroke-linecap:round;stroke-linejoin:round}
.howto--split .howto__title{justify-content:flex-start}
.howto--play .howto__glyph{animation:howto-fade .35s ease-out var(--d,0s) forwards}
@keyframes howto-fade{0%{opacity:0}100%{opacity:1}}