/* Approved generated wordmark. The existing H2 remains the accessible name.
 * A bounded box reserves space before decode; branding.js enables artwork only
 * after successful loading. A missing asset leaves the original title visible.
 */
#screen .title-copy h2 {
  width:100%; height:clamp(110px,25dvh,248px);
  min-height:0; max-width:100%; margin:8px auto 16px;
  display:flex; align-items:center; justify-content:center;
  background-position:center; background-repeat:no-repeat; background-size:contain;
}
html[data-branding=ready] #screen .title-copy h2 {
  background-image:url('../assets/brand/eclats-logo.avif');
  color:transparent; font-size:0!important; line-height:0;
  text-shadow:none; border:0;
}
body[data-screen=title] #heroArt {opacity:.55}
#screen .title-copy .subtitle {font-size:20px;line-height:1.45;margin:0 0 22px}
#screen .title-progress {margin-top:18px}
/* The logo never changes the established, equally sized home buttons. */
@media(max-width:600px) {
  body[data-screen=title] #heroArt {display:none}
  #screen .title-copy h2 {height:clamp(110px,25dvh,210px);margin:4px auto 16px}
  #screen .title-copy .subtitle {font-size:18px;line-height:1.4;margin-bottom:20px}
}
@media(max-height:700px) {
  #screen .title-copy .eyebrow {display:none}
  #screen .title-copy h2 {height:clamp(85px,25dvh,156px);margin:0 auto 12px}
  #screen .title-copy .subtitle {display:none}
  #screen .title-progress {margin-top:14px}
}
@media(max-height:560px) and (min-width:601px) {
  #screen .title-copy h2 {height:88px;margin:0 auto 10px}
  #screen .title-progress {margin-top:10px}
}
/* Contrast/reader settings should prefer the semantic wordmark, not hide it. */
@media(forced-colors:active) {
  html[data-branding=ready] #screen .title-copy h2 {
    background-image:none;color:CanvasText;font-size:64px!important;line-height:1.1;
  }
}