/* Give the project name the larger line in the title. */
.project-credit .fragua-logo {
  display: block;
  width: 142px;
  height: auto;
  mask-image: url('media/fraguar-logo.png');
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.v02-title {
  max-width: min(50vw, 580px);
}
.v02-title h1 {
  font-size: clamp(31px, 3.8vw, 54px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -.045em;
  margin: 0 0 12px;
}
.v02-title h1 > strong,
.v02-title h1 > span {
  display: block;
  color: inherit;
}
.v02-title h1 > strong {
  font-size: .6em;
  font-weight: 700;
  margin-bottom: .12em;
}
#empty-cloud {
  max-width: 34ch;
  margin-top: 14px;
}
.footer-actions #pause-button > span {
  margin-left: 0;
}
body[data-active-person] .v02-title {
  opacity: 0 !important;
}
.loading-credit {
  text-align: center;
  min-width: 210px;
}
.loading-credit > p:nth-child(2) {
  font-size: 17px;
  color: var(--paper);
}
.loading-credit > span {
  font-size: 11px;
}
@media (min-width: 651px) and (max-width: 1499px) {
  .v02-title {
    top: 154px;
  }
}
@media (max-width: 650px) {
  .project-credit .fragua-logo {
    width: clamp(96px, 24vw, 112px);
  }
  .v02-title {
    top: 124px;
    max-width: calc(100vw - 48px);
  }
  .v02-title h1 {
    font-size: clamp(22px, 6vw, 34px);
    margin-bottom: 8px;
  }
  .has-person-profile .word.selected {
    line-height: 1.04;
  }
}
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .project-credit .fragua-logo {
    width: 108px;
  }
  .v02-title {
    top: 124px;
    max-width: 225px;
  }
  .v02-title h1 {
    font-size: clamp(22px, 3.7vw, 32px);
  }
}

.sound-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--paper);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.sound-listen {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
}
.sound-button svg { flex: none; }
.sound-mute-waves, .sound-mute[aria-pressed="true"] .sound-mute-cross { display: none; }
.sound-mute[aria-pressed="true"] .sound-mute-waves { display: inline; }
.sound-button-text {
  position: absolute;
  z-index: 2;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--paper);
  font-size: 11px;
  line-height: 1.35;
  visibility: hidden;
}
.sound-button-text::before {
  content: '';
  position: absolute;
  inset: -7px 0 100%;
}
.sound-button:is(:hover, :focus-visible) { z-index: 1; }
.sound-button:is(:hover, :focus-visible) .sound-button-text { visibility: visible; }
.sound-button[aria-pressed="true"] svg,
.sound-listen[data-state="playing"] { color: var(--accent); }
.sound-mute { border-color: var(--line); }
.sound-button:is(:hover, :focus-visible) { border-color: var(--accent); }
.sound-button:disabled { opacity: .52; }
.sound-dialog {
  margin-inline-start: auto;
  margin-inline-end: 9px;
  font-size: 10px;
}
.sound-dialog .sound-button-text { inset-inline: auto 0; }
@media (max-width: 650px) {
  .sound-listen { top: calc(100% - 2px); font-size: 10px; }
  .sound-listen svg { width: 15px; height: 15px; }
  .footer-actions { align-items: center; }
}

#stage, #space { transition: opacity .32s ease, transform .40s ease; }
#space { transform-origin: 53% 52%; }
body:has(#drawer[open][data-focus-word]) #stage { opacity: .14; }
body:has(#drawer[open][data-focus-word]) #space { transform: scale(.84); filter: blur(1.3px); }
body[data-active-person]:has(#drawer[open].material-tour) #stage { opacity: .5; }
body[data-active-person]:has(#drawer[open].material-tour) #space { filter: none; }
#stage .word.material-word > span {
  color: var(--word-focus, var(--cloud-ink-near));
  text-shadow: 0 0 10px var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  #stage, #space { transition: none; }
  body:has(#drawer[open][data-focus-word]) #space { transform: none; }
}