/* Hero drawing: three isometric slabs that separate together on hover or tap. */
.hl-drawing{--spread:0;display:block;position:relative;width:100%;max-width:460px;margin-inline:auto;padding:0;border:0;background:transparent;color:var(--ink);text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hl-svg{display:block;width:100%;height:auto;overflow:visible;transform:translate(var(--px,0px),var(--py,0px));transition:transform .35s var(--ease)}
.hl-svg path{stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.hl-piece{transform:translate(calc(var(--dx) * var(--spread)),calc(var(--dy) * var(--spread)));transition:transform .75s var(--ease)}
.hl-drift{animation:hl-breathe 6s calc(var(--i) * -1.5s) ease-in-out infinite}
.hl-left{fill:var(--paper)}
.hl-right{fill:var(--ink-3)}
.hl-paper{fill:var(--paper-2)}
.hl-pale{fill:var(--accent-pale)}
.hl-accent{fill:var(--accent)}
.hl-svg .hl-tag path{fill:none;stroke-width:1;stroke-dasharray:3 4;transition:stroke-dasharray .3s}
.hl-tag text{font:600 13px var(--mono);letter-spacing:.08em;fill:var(--ink)}
.hl-drawing[aria-pressed=true]{--spread:1}
.hl-drawing[aria-pressed=true] .hl-tag path{stroke-dasharray:none}
.hl-drawing:focus-visible{outline:2px dashed var(--accent)!important;outline-offset:8px!important}
@keyframes hl-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media(hover:hover) and (pointer:fine){.hl-drawing:hover{--spread:1}.hl-drawing:hover .hl-tag path{stroke-dasharray:none}}
@media(max-width:1000px){.hl-drawing{max-width:420px}}
@media(prefers-reduced-motion:reduce){.hl-drift{animation:none}.hl-piece,.hl-svg{transition:none}.hl-svg{transform:none}}