/* worthitfortravel lockup — values from design/handoff/travel-logo/reference/lockup.html (do not restyle).
   font-size is the only size knob; everything is in em. Colours come from brand.css (brand.mjs). */
@font-face {
  font-family: 'Figtree';
  src: url('/static/fonts/figtree-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
.wt-logo { display: inline-flex; align-items: center; font-family: var(--wt-font); font-weight: var(--wt-weight); letter-spacing: var(--wt-tracking); line-height: 1; color: var(--wt-ink); text-decoration: none; }
.wt-logo[data-size="16"] { font-size: 16px; }
.wt-logo[data-size="19"] { font-size: 19px; }
.wt-logo[data-size="28"] { font-size: 28px; }
.wt-logo[data-size="40"] { font-size: 40px; }
.wt-logo[data-size="96"] { font-size: 96px; }
.wt-logo[data-tone="dark"] { color: var(--wt-white); }
@media (prefers-color-scheme: dark) { .wt-logo[data-tone="auto"] { color: var(--wt-white); } }
.wt-tag {
  position: relative; display: inline-block; background: var(--wt-tag); color: var(--wt-ink);
  padding: .125em .4em .16em .95em; border-radius: .3em; transform: rotate(var(--wt-tilt));
  /* the hole is cut out with a mask, so the ground shows through */
  -webkit-mask-image: radial-gradient(circle at .5em 50%, transparent .11em, #000 .115em);
  mask-image: radial-gradient(circle at .5em 50%, transparent .11em, #000 .115em);
}
.wt-eyelet { position: absolute; left: .31em; top: 50%; width: .38em; height: .38em; margin-top: -.19em; border-radius: 50%; background: var(--wt-eyelet); }
.wt-suffix { margin-left: .1em; }
/* header link: ≥ 44×44 hit target without changing the drawn size */
a.wt-logo { min-height: 44px; min-width: 44px; }
.wt-logo:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.wt-on-photo { background: var(--wt-scrim); padding: .35em .5em; border-radius: .4em; }