/* Component: buttons (.btn.ghost, .btn.dark with the green arrow square) */
.btn{display:inline-flex;align-items:center;height:max(46px, calc(54 * var(--u)));border-radius:5px;font-size:var(--fs-body);letter-spacing:-.01em;line-height:1;transition:background .3s,color .3s,border-color .3s}
.btn.ghost{padding:0 calc(20 * var(--u) + 6px);border:1px solid var(--ink);background:var(--ink);color:var(--bg)}   /* solid black, inverts on hover */
.btn.ghost:hover{background:var(--bg);color:var(--ink)}
.btn.dark{gap:calc(16 * var(--u) + 6px);padding:4px 4px 4px calc(20 * var(--u) + 6px);background:var(--ink);color:var(--bg);transition:background .3s,color .3s,gap .4s var(--ease-out)}
.btn.dark i{display:grid;place-items:center;align-self:stretch;aspect-ratio:1;border-radius:3px;background:var(--green);color:var(--ink);font-style:normal;transition:transform .4s var(--ease-out)}
.btn.dark:hover{gap:calc(16 * var(--u) + 18px)}   /* the square moves right and the button grows with it */