/**
 * brand.css — site-wide NSI brand layer (loaded on every public page EXCEPT
 * single listings, where skin.css loads instead and carries its own
 * dark-header lockup styles under body.single-listing).
 *
 * This file styles exactly one thing: the ribbon-N mark + live-text lockup
 * that replaces the retired pinwheel logo in the header and footer. Nothing
 * here touches the stock theme's fonts, layout, or colors.
 *
 * Colors are the documented HEX equivalents of the NSI v2.0 tokens. The
 * header sits on the theme's LIGHT surface, so the light-surface pair is the
 * default (navy name, deep-teal tag); the footer is dark site-wide, so the
 * footer variant flips to the dark-surface pair (cream name, electric tag).
 *
 * Selectors are intentionally kept at or below skin.css specificity
 * (skin.css prefixes everything with body.single-listing): the two files
 * never co-load, but if that ever changed, skin.css must keep winning on
 * listing pages.
 *
 * @font-face note: src URLs are bare (no query string) and byte-match the
 * preload hrefs printed by nsi_skin_head_preloads() — a mismatched URL makes
 * browsers download every font twice. This file lives in the same
 * assets/css/ directory as skin.css, so ../fonts/ resolves identically.
 */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-variable-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Header lockup — mark + two-line wordmark inside the theme's .lp-logo box. */

.nsi-lockup {
  display: flex;
  align-items: center;
}

.nsi-lockup > a {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}

.nsi-lockup img {
  width: 56px;
  height: auto; /* guards the intrinsic 44x41 ratio against theme img rules */
  display: block;
  flex: 0 0 auto;
}

.nsi-lockup-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.nsi-lockup-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .01em;
  color: #1A2532; /* navy-deep */
}

.nsi-lockup-tag {
  font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0A565A; /* teal-deep — 7:1+ on the light header surface */
  margin-top: 3px;
}

/* Footer lockup — the theme footer is dark site-wide, so the wordmark flips
   to the dark-surface pair. Markup has no inner <a>, so the gap sits here. */

.nsi-lockup--footer {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin: 18px 0 10px;
}

.nsi-lockup--footer .nsi-lockup-name {
  color: #F5F1EC; /* cream */
}

.nsi-lockup--footer .nsi-lockup-tag {
  color: #5DDADE; /* teal-electric */
}

/* Responsive collapse — mirrors skin.css: in narrow headers the tag yields,
   the name wraps beside the mark, and nothing crosses the viewport edge. */

@media (max-width: 991px) {
  .nsi-lockup-tag {
    display: none;
  }

  .nsi-lockup-text {
    white-space: normal;
  }

  .nsi-lockup-name {
    font-size: 1.05rem;
    line-height: 1.15;
  }

  .nsi-lockup img {
    width: 44px;
  }
}

@media (max-width: 375px) {
  .nsi-lockup img {
    width: 36px;
  }

  .nsi-lockup-name {
    font-size: .875rem;
  }
}