/* Responsive Merle + wordmark lockup. */
.brand.has-mark {
  display: inline-grid;
  grid-template-columns: 100px minmax(0, auto);
  column-gap: 18px;
  align-items: center;
  padding: 0;
  max-width: 100%;
  text-align: left;
  color: #173d35;
}
.brand.has-mark .brand-mark {
  grid-column: 1;
  grid-row: 1 / 3;
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.brand.has-mark .brand-title {
  grid-column: 2;
  min-width: 0;
  font: 400 clamp(44px, 5.25vw, 64px)/1.04 var(--serif);
  letter-spacing: -.035em;
  white-space: nowrap;
}
.brand.has-mark .brand-subtitle {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 0;
  font: 400 18px/1.35 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #527567;
  white-space: nowrap;
}
.brand.has-mark .brand-subtitle::before,
.brand.has-mark .brand-subtitle::after {
  content: '';
  display: block;
  flex: 1 1 24px;
  width: 24px;
  max-width: 35px;
  height: 1px;
  background: #9bb8a3;
}
@media (max-width: 900px) and (min-width: 601px) {
  .brand.has-mark { grid-template-columns: 86px minmax(0, auto); column-gap: 15px; }
  .brand.has-mark .brand-mark { width: 86px; height: 86px; }
  .brand.has-mark .brand-title { font-size: clamp(44px, 6.4vw, 58px); }
  .brand.has-mark .brand-subtitle { font-size: 16px; letter-spacing: .15em; }
}
@media (max-width: 600px) {
  .brand.has-mark { grid-template-columns: 64px minmax(0, auto); column-gap: 10px; }
  .brand.has-mark .brand-mark { width: 64px; height: 74px; }
  .brand.has-mark .brand-title { font-size: clamp(32px, 7vw, 42px); letter-spacing: -.04em; }
  .brand.has-mark .brand-subtitle { display: block; text-align: center; margin-top: 8px; font-size: 13px; letter-spacing: .06em; }
  .brand.has-mark .brand-subtitle::before,
  .brand.has-mark .brand-subtitle::after { display: none; }
}
@media (max-width: 370px) {
  .brand.has-mark { grid-template-columns: 54px minmax(0, auto); column-gap: 8px; }
  .brand.has-mark .brand-mark { width: 54px; height: 68px; }
  .brand.has-mark .brand-title { font-size: 30px; }
  .brand.has-mark .brand-subtitle { font-size: 12px; letter-spacing: .04em; }
}

/* Chosen complete wordmark with the sleeping Merle illustration. */
.brand.has-full-logo {
  position: relative;
  display: block;
  width: min(660px, 100%);
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
}
.brand.has-full-logo .brand-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px #173d3530);
}
.brand.has-full-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, #fffbe933 46%, #fffdf78f 50%, #fffbe933 54%, transparent 60%) 150% 0 / 300% 100% no-repeat;
  /* Exact glyph outlines: the shine never reaches Merle, her tail or the foliage. */
  -webkit-mask: url('brand/logo-lettering-mask.svg') center / contain no-repeat;
  mask: url('brand/logo-lettering-mask.svg') center / contain no-repeat;
  animation: porphyr-logo-gleam 14s ease-in-out infinite;
}
@keyframes porphyr-logo-gleam { 0%, 18% { background-position: 150% 0; } 75%, 100% { background-position: -50% 0; } }
html[lang="en"] .brand.has-full-logo::after { -webkit-mask-image: url('brand/logo-lettering-mask-en.svg'); mask-image: url('brand/logo-lettering-mask-en.svg'); }
@media (prefers-reduced-motion: reduce) { .brand.has-full-logo::after { animation: none; background: none; } }
.brand.has-full-logo .brand-mark { display: none; }
.brand.has-full-logo .brand-title,
.brand.has-full-logo .brand-subtitle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 600px) {
  .brand.has-full-logo { width: min(460px, 100%); }
}