/* The ZEV PROJECTS wordmark.

   Two lines, not one: ZEV small and tracked out on top, PROJECTS below in the
   heavy weight that carries the name. A hairline runs out from ZEV to the
   width of PROJECTS so the top line is not left hanging short.

   The only piece of brand shared between the sign-in door (Tailwind, the
   DataVault look) and the app itself (zev.css), so it lives in its own file
   and both link it. Size and colour are set by the host, on the mark or on
   anything above it:

     --zevmark-size    the size of PROJECTS; everything else scales from it
     --zevmark-accent  ZEV and the hairline
     --zevmark-ink     PROJECTS (defaults to the surrounding text colour) */

.zevmark {
    display: inline-grid;
    grid-template-columns: max-content;
    line-height: 1;
    letter-spacing: normal;
    text-decoration: none;
    white-space: nowrap;
}

.zevmark__top {
    display: flex;
    align-items: center;
    gap: calc(var(--zevmark-size, 15px) * 0.34);
    margin-bottom: calc(var(--zevmark-size, 15px) * 0.26);
    color: var(--zevmark-accent, currentColor);
}

.zevmark__zev {
    font-size: calc(var(--zevmark-size, 15px) * 0.46);
    font-weight: 700;
    letter-spacing: 0.38em;
    /* letter-spacing hangs a gap off the V; pull it back so the two lines
       start on the same optical edge */
    margin-right: -0.38em;
}

.zevmark__rule {
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.38;
}

.zevmark__projects {
    font-size: var(--zevmark-size, 15px);
    font-weight: 800;
    letter-spacing: -0.005em;
    color: var(--zevmark-ink, currentColor);
}

a.zevmark:hover,
a:hover > .zevmark { text-decoration: none; }
a:hover .zevmark__rule { opacity: 0.7; }