/* One wordmark for the homepage and conversation header. */
.site-header .brand,
.cast-focus .lounge-header .brand {
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
  width: auto;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  white-space: nowrap;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(27px, 3.6vw, 48px);
  font-weight: 500;
  line-height: normal;
  letter-spacing: .02em;
  color: var(--brand-color, #274c3f);
  text-shadow: var(--brand-shadow, 0 2px 18px #fffdf5);
  text-decoration: none;
}

.site-header .brand > span,
.cast-focus .lounge-header .brand > span { display: inline; }

.site-header .brand-mark,
.cast-focus .lounge-header .brand-mark {
  margin-left: 3px;
  color: var(--brand-mark-color, #315f50);
}

.site-header .brand .brand-alpha,
.cast-focus .lounge-header .brand .brand-alpha {
  position: absolute;
  top: 0;
  right: -2em;
  left: auto;
  z-index: 1;
  transform: rotate(35deg);
  transform-origin: center;
  pointer-events: none;
  display: block;
  margin: 0;
  padding: .15em .65em;
  border: 1px solid #315f5040;
  border-radius: 999px;
  background: #f5f8efdc;
  color: #315f50;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(10px, .25em, 18px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
  text-shadow: none;
  box-shadow: 0 2px 6px #14231d20;
}
.cast-focus .lounge-header .brand .brand-alpha {
  border-color: #e6c6a255;
  background: #241b2bcc;
  color: #f1d7b2;
}

.cast-focus .lounge-header {
  --brand-color: #f3eadc;
  --brand-mark-color: #88d6ba;
  --brand-shadow: 0 2px 18px #140e1dcc;
}

@media (max-width: 680px) {
  .site-header .brand, .cast-focus .lounge-header .brand { font-size: 28px; }
}
@media (max-width: 360px) {
  .site-header .brand, .cast-focus .lounge-header .brand { font-size: 24px; }
  .site-header .brand .brand-alpha { right: -.5em; }
}
@media (max-width: 340px) {
  .site-header .brand, .cast-focus .lounge-header .brand { font-size: 22px; }
}