{#- The brand sentence, in one place: the figure, the wordmark and
    the tagline that together read «little sister is watching for you.». Included by
    the navbar (as the `mark` figure) and by the login page (as the `gaze`), so
    the name is written once; the web-customization phase is what makes
    `brand_name` deployment-settable, and this default is the seam it will use.

    The figure is chosen by `brand_figure`: the **mark** is one off-center eye,
    mirrored so the lashes point left and the invisible nose sits right, and it
    winks when you point at the brand (overview.css swaps the two groups). The
    **gaze** is the pair, and it blinks on its own — motion belongs to the login
    page, never to the dashboard. Geometry is the canonical brand-r4 sheet; the
    inks are tokens so a theme can re-ink the mark without forking this. -#}
{% if brand_figure | default('mark') == 'gaze' %}
    {% include '_gaze.html' %}
{% else %}
    <svg class="ls-brand__mark" width="34" height="34" viewBox="0 0 64 64"
         aria-hidden="true" focusable="false">
        <g transform="translate(-2,8) scale(0.78)">
            <g transform="translate(64,0) scale(-1,1)">
                <path d="M10 12 C23 2.5 44 1 56 7.5 C43 4.5 25 7 12 13.5 Z" fill="var(--ls-brand-ink)"/>
                <g class="ls-eye-open">
                    <path d="M7 34 C16 19 44 16 57 29 C48 42 18 44 7 34 Z"
                          fill="var(--ls-brand-sclera)" stroke="var(--ls-brand-ink)" stroke-width="1.6"/>
                    <defs>
                        <clipPath id="ls-mark-eye">
                            <path d="M7 34 C16 19 44 16 57 29 C48 42 18 44 7 34 Z"/>
                        </clipPath>
                    </defs>
                    <g clip-path="url(#ls-mark-eye)">
                        <circle cx="33" cy="27.5" r="9.5" fill="var(--ls-brand-iris)"/>
                        <circle cx="33" cy="27.5" r="9.5" fill="none"
                                stroke="var(--ls-brand-iris-rim)" stroke-width="2.4"/>
                        <circle cx="33" cy="27.5" r="3.7" fill="var(--ls-brand-pupil)"/>
                        <circle cx="36.2" cy="24.6" r="2.1" fill="var(--ls-brand-sclera)"/>
                        <circle cx="30" cy="31" r="1.1" fill="var(--ls-brand-sclera)" opacity=".65"/>
                    </g>
                    <path d="M7 34 C16 19 44 16 57 29" fill="none"
                          stroke="var(--ls-brand-ink)" stroke-width="4.6" stroke-linecap="round"/>
                    <path d="M54.5 25.5 L63.5 20.5 L57 31.5 Z" fill="var(--ls-brand-ink)"/>
                    <path d="M48 19 C51 16 54 14.5 57 13.5 M41.5 16.8 C43 14 44.5 12.5 46.5 11"
                          fill="none" stroke="var(--ls-brand-ink)" stroke-width="2.3" stroke-linecap="round"/>
                </g>
                <g class="ls-eye-shut">
                    <path d="M8 35 C20 45 44 44 56 31" fill="none"
                          stroke="var(--ls-brand-ink)" stroke-width="3.4" stroke-linecap="round"/>
                    <path d="M49 40.8 C51.5 43.5 53.5 45.5 56 47 M42 42.8 C43.5 45.5 45 47.5 46.5 49.5 M54 37 C57 39 59.5 40.5 62 41.5"
                          fill="none" stroke="var(--ls-brand-ink)" stroke-width="2.3" stroke-linecap="round"/>
                </g>
            </g>
        </g>
    </svg>
{% endif %}
<span class="ls-brand__wordmark">{{ brand_name | default('little sister') }}</span>
<span class="ls-brand__tagline">is watching for you.</span>