/*
 * Dark title clarity and page-heading breathing room.
 *
 * The supplied title artwork has fine ivory, silver and gold edge detail. A broad
 * white drop shadow softened those details in dark mode, especially when the
 * responsive header scaled the artwork. Keep the artwork crisp and give large
 * display headings enough line-box room for capitals, punctuation and descenders.
 */

/* Crisp dark wordmark and desktop mark: defined ivory edges, restrained depth,
   no diffuse halo. The source mark is 447 × 473, so the sidebar is scaling down,
   never enlarging a low-resolution asset. */
html:not([data-theme="light"]) :is(
  .persistent-brand > span img,
  .sidebar-brand img,
  .overview-brand-hero img
){
  opacity:1!important;
  image-rendering:auto;
  transform:none!important;
  filter:
    invert(1)
    hue-rotate(180deg)
    saturate(.62)
    brightness(1.035)
    contrast(1.16)
    drop-shadow(0 1px 0 rgba(255,250,232,.28))
    drop-shadow(0 3px 5px rgba(0,0,0,.62))!important;
}

html:not([data-theme="light"]) .persistent-brand{
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,248,220,.035),
      rgba(255,248,220,.012) 54%,
      transparent 76%
    )!important;
}

/* Display glyphs must not be cropped by their intentionally tight type scale. */
.content .hero{
  overflow:visible!important;
}

.content .hero h2{
  max-width:100%;
  padding:.075em .025em .13em;
  overflow:visible;
  line-height:1.06!important;
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* Dynamic social pages carry the longest titles. Give their full lockups room to
   wrap cleanly, including the eyebrow and supporting copy. */
.content .social-hero{
  box-sizing:border-box;
  width:100%;
  padding:
    clamp(22px,2.4vw,38px)
    clamp(18px,2.6vw,42px)
    clamp(26px,3vw,46px)!important;
}

.content .social-hero h2{
  width:min(100%,24ch);
  margin:clamp(8px,1vw,14px) 0 clamp(12px,1.4vw,20px)!important;
  font-size:clamp(2rem,4.35vw,4.1rem)!important;
  letter-spacing:-.045em!important;
}

.content .social-hero .muted{
  max-width:74ch;
  margin-block:0;
}

/* Collection overview is deliberately subordinate to its artwork; retain that
   compact hierarchy while still leaving enough vertical room for the text. */
#sprites > .hero h2{
  padding:.12em .04em .18em!important;
  line-height:1.2!important;
}

@media(max-width:719px){
  .content .hero h2{
    padding-top:.1em;
    padding-bottom:.18em;
    line-height:1.1!important;
  }

  .content .social-hero{
    padding:20px 14px 26px!important;
  }

  .content .social-hero h2{
    width:100%;
    font-size:clamp(2rem,10vw,3.25rem)!important;
    letter-spacing:-.035em!important;
  }
}