/* ═══════════════════════════════════════════════════════════
   BRAND LOCKUP

   The island, a saucepan with steam and a wine glass, and the name in
   spaced serif capitals: the sister of the MV Boats mark, which puts a sailboat on the
   same line.
   The same on every page (tools/build-brand.py draws it; sync-brand.js
   writes it into each page between <!--brand--> markers). One colour, as
   MV Boats is: the mark takes currentColor, so it follows the theme.
   ═══════════════════════════════════════════════════════════ */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  line-height: 1;
}
.brand-lockup .brand-mark {
  height: 1.6em;
  width: auto;   /* the SVG carries the mark's own proportions */
  flex: 0 0 auto;
  overflow: visible;
}
.brand-isle { fill: currentColor; }
.brand-line { stroke: currentColor; }   /* the line and the steam */
.brand-lockup .brand-text .brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: 0.28em;
  margin-right: -0.28em;   /* the tracking after the last letter */
  text-transform: uppercase;
  color: inherit;
}
.brand-lockup .brand-text .brand-tag {
  display: block;
  margin-top: 0.35em;
  font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #a68a3e;
}
.brand-lockup .brand-text { display: inline-flex; flex-direction: column; }
[data-theme="dark"] .brand-lockup .brand-text .brand-tag { color: #c8a84e; }

/* On a dark photograph (the homepage hero) the lockup is reversed. */
.brand-lockup--reversed { color: #faf8f3; }
.brand-lockup--reversed .brand-text .brand-tag { color: #dfc06a; }

@media (max-width: 480px) {
  .brand-lockup .brand-text .brand-tag { display: none; }
  .brand-lockup { gap: 0.5em; }
  .brand-lockup .brand-mark { height: 1.25em; }
  .brand-lockup .brand-text .brand-name { letter-spacing: 0.12em; margin-right: -0.12em; font-size: 0.74em; }
}

/* Ink on light pages, cream in the dark theme, whatever colour the page's
   own header link happens to be. (0,2,0) and loaded last, so it outranks the
   older wordmark rules it replaces, such as .sp-page .nl-wordmark. */
:root .brand-lockup { color: #1a1a2e; }
:root[data-theme="dark"] .brand-lockup { color: #faf8f3; }
:root .brand-lockup.brand-lockup--reversed { color: #faf8f3; }
/* The old wordmarks coloured every span inside them gold
   (.nl-wordmark span, .footer-brand span); the lockup's text is in spans. */
:root .brand-lockup .brand-text,
:root .brand-lockup .brand-text .brand-name { color: inherit; }