/*
 * Brand styles — logo lockup and season tagline.
 *
 * The tagline text itself lives in website/partials/brand_tagline.html
 * so it can be changed in one place. Classes below style it for the
 * two contexts it appears in: the landing hero and page/game headers.
 */

/* ── Tagline: landing hero (big, centered, below wordmark) ── */
.brand-tagline {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 40px;
}

.brand-tagline__primary {
  text-transform: uppercase;
}

.brand-tagline__sep {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin: 0 2px;
}

/* EB Garamond italic echoes the h1 hero type and softens the tag. */
.brand-tagline__italic {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.15em;
  letter-spacing: 0.5px;
  text-transform: none;
}

/* ── Tagline: in-header variant (inline, smaller, same two-part structure) ── */
.brand-tagline--inline {
  display: inline;
  font-size: 11px;
  letter-spacing: 2px;
  margin: 0 0 0 10px;
  color: #ffffff;
  font-weight: 600;
}

.brand-tagline--inline .brand-tagline__sep {
  margin: 0 2px;
}

.brand-tagline--inline .brand-tagline__italic {
  font-family: 'EB Garamond', 'Georgia', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.2em;
  letter-spacing: 0.3px;
}

/* ── Brand lockup: logo + wordmark + inline tagline for page headers ── */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.brand-lockup__logo {
  width: 28px;
  height: 28px;
  display: block;
  opacity: 0.92;
}

.brand-lockup__wordmark {
  font-size: 18px;
  font-weight: 700;
  color: var(--link-blue);
  letter-spacing: 0.2px;
}

@media (max-width: 600px) {
  .brand-tagline { font-size: 11px; letter-spacing: 2.5px; margin-bottom: 32px; }
  .brand-tagline__italic { font-size: 1.1em; }
  .brand-lockup__logo { width: 24px; height: 24px; }
  .brand-lockup__wordmark { font-size: 16px; }
  .brand-tagline--inline { display: none; }
}