/* Validated.Directory's shell, shared by every page: its mark in the header and the footer. Loads after the kit's
   /brand/tokens.css and /brand/base.css (copied in by scripts/sync-kit.sh). Taken from the record prototype that Mark
   rated as the standard (BGA 52), with the header kept to one row on a phone zoomed to about 280px wide (BGA 55). */
.vd .site-in { column-gap: 12px; }
.vd-mark { display: flex; align-items: center; gap: 9px; margin-right: auto; padding: 8px 0; color: var(--cream); text-decoration: none; }
.vd-icon { width: 30px; height: 30px; flex: 0 0 auto; }
.vd-word { display: grid; gap: 4px; }
.vd-name { font: 400 19px/1 var(--display); letter-spacing: -0.004em; white-space: nowrap; }
.vd-by { font: 500 9.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--cream-2); white-space: nowrap; }
.site.day .vd-mark { color: var(--ink); }
.site.day .vd-by { color: var(--ink-2); }
.site:not(.day) .vd-tick, .foot .vd-tick { stroke: #8b8ff8; }
.foot .vd-mark { width: auto; margin-right: 0; color: var(--cream); justify-self: start; }
.foot .vd-name { font-size: 24px; }
@media (max-width: 370px) { .vd .site-in { column-gap: 12px; } .vd-name { font-size: 17.5px; } .vd-mark { gap: 7px; } .vd-icon { width: 27px; height: 27px; } }
@media (max-width: 340px) { .vd-name { font-size: clamp(13px, 4.8vw, 17.5px); } .vd-mark { gap: 6px; } .vd-icon { width: 24px; height: 24px; } }
@media (max-width: 300px) { .vd-icon { display: none; } }
@media (min-width: 900px) {
  .vd-name { font-size: 22px; }
  .vd-icon { width: 32px; height: 32px; }
  .foot .vd-mark { grid-row: 1 / span 2; }
}