/* =====================================================================
   VAL STUDIO — THE MARK

   >>> THE ONE PLACE THE LOGO'S SIZE AND LETTER SPACING ARE WRITTEN DOWN. <<<

   The mark used to be copied into five stylesheets — core/site.css for
   the interior pages and an inline block in index.html and each of the
   three labs pieces — which meant "make the logo smaller" was five edits
   and any one of them could be missed. It is one file now, and every
   page that shows a mark links it:

     index.html, labs/ContactAureole.html, labs/ProceduralBreath.html and
     labs/Rocky.html link it directly;
     core/site.css @imports it, so the nineteen pages that link
     core/site.css get it without a second tag of their own.

   WHAT THE MARK IS. assets/val-logo.svg cut into three files — val-v,
   val-a, val-l — referenced as CSS masks rather than inlined. Each file
   is painted a plain white so mask-image reads its alpha only, and
   background:currentColor fills the result. That is what lets the mark
   answer `color` the way the site's text does: the .ic glow finds real
   currentColor content to glow around, and no page carries a copy of the
   path data.

   The letters are separate files rather than one so the SPACING BETWEEN
   THEM can be a number this stylesheet owns — which is the whole of the
   tracking below, and the whole of what hover does to it.

   The four numbers in CONFIG are the only ones meant to be edited. The
   per-letter widths (299/278, 300/278, 208/278) are measurements of the
   source file, not settings: they are each letter's own width in the
   278-unit-tall space val-logo.svg is drawn in, and changing one would
   stretch that letter rather than resize the mark.
===================================================================== */

/* ==== CONFIG ==========================================================
   THE LOGO'S SIZE AND ITS LETTER SPACING. Edit here and nowhere else.
====================================================================== */
:root{
  /* THE SIZE. The mark's cap height — everything else about the mark is
     a multiple of this, so this one number is the whole of "bigger" and
     "smaller". Was 14px; 12px is the shipped setting. The menu button
     opposite it is --menu-box, in core/site.css and index.html. */
  --logo-h: 12px;

  /* THE LETTER SPACING. The two gaps are val-logo.svg's OWN spacing,
     written as a multiple of --logo-h: in that file's 278-unit-tall
     space the V→A gap is 296 units and the A→L gap is 344, and they are
     deliberately unequal. Leave these two alone unless the source file
     is redrawn — they are the mark's proportions, not its tracking. */
  --mark-gap-va: 1.0647;   /* 296 / 278 */
  --mark-gap-al: 1.2374;   /* 344 / 278 */

  /* ...and THIS is the tracking: the multiplier both gaps are scaled by.
     1 matches val-logo.svg exactly. Below 1 the letters draw together,
     above 1 they open out. Was 1; .88 is the shipped setting. */
  --mark-track: .88;

  /* What hover does, as a fraction of the resting tracking rather than
     an absolute one — so tightening --mark-track above keeps the gesture
     the same size instead of quietly flattening it. .65 = hover closes
     the gaps to about two thirds of wherever they rest. 1 = no gesture. */
  --mark-squeeze: .65;

  /* How long the letters take to travel, and on what curve. Held here
     rather than read from the page because the four stylesheets that
     used to own a copy of this rule spelled their duration tokens
     differently (--dur-slow on the interior pages, --dur-l on the home
     page), and the mark is one thing. Same value either way. */
  --mark-dur:  .62s;
  --mark-ease: cubic-bezier(.22,.72,.2,1);
}
/* ==== end CONFIG ====================================================== */

/* Bottom-aligned, because the three letters are cropped to their own ink
   and the L is shorter than the V and the A. */
.mark{display:flex;align-items:flex-end}

.mark i{
  display:block;height:var(--logo-h);background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:margin-left var(--mark-dur) var(--mark-ease);
}

/* Each letter's width is its own measurement in the source file's units,
   scaled by --logo-h. The V leads, so it carries no gap. */
.mark .v{
  width:calc(var(--logo-h) * 299 / 278);
  -webkit-mask-image:url(/assets/val-v.svg);mask-image:url(/assets/val-v.svg);
}
.mark .a{
  width:calc(var(--logo-h) * 300 / 278);
  margin-left:calc(var(--logo-h) * var(--mark-gap-va) * var(--mark-track));
  -webkit-mask-image:url(/assets/val-a.svg);mask-image:url(/assets/val-a.svg);
}
.mark .l{
  width:calc(var(--logo-h) * 208 / 278);
  margin-left:calc(var(--logo-h) * var(--mark-gap-al) * var(--mark-track));
  -webkit-mask-image:url(/assets/val-l.svg);mask-image:url(/assets/val-l.svg);
}

/* THE TRACKING UNDER THE POINTER. Hover restates the whole margin rather
   than swapping --mark-track for another value: a transition driven by a
   custom-property change does not interpolate reliably, and the letters
   would jump rather than travel. */
#brand a:hover .mark .a,#brand a:focus-visible .mark .a{
  margin-left:calc(var(--logo-h) * var(--mark-gap-va) * var(--mark-track) * var(--mark-squeeze));
}
#brand a:hover .mark .l,#brand a:focus-visible .mark .l{
  margin-left:calc(var(--logo-h) * var(--mark-gap-al) * var(--mark-track) * var(--mark-squeeze));
}

/* The box around it. Padding only — the colour is the page's business,
   because the home page, the interior pages and the Projects section
   each rest the mark at a different grey. */
#brand a{display:block;padding:5px 2px}