/* Approved outlined artwork: never recreate the wordmark or loop geometry in CSS. */
.brand-logo { display:inline-flex; flex:none; align-items:center; width:224px; max-width:100%; }
.brand-logo img { display:block; width:100%; height:auto; }
.brand-symbol { display:inline-block; width:1em; height:auto; vertical-align:middle; }
.ticker .brand-symbol { width:1.15em; }
.site-footer .brand-logo { width:205px; }
@media (max-width:600px) {
  .site-header .brand-logo { width:190px; }
  .site-footer .brand-logo { width:185px; margin-right:calc(100% - 185px); }
}

/* Keep the document canvas painted when mobile browser controls resize it. */
html { min-height:100%; background:var(--paper); }
body { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
main { flex:1 0 auto; display:flex; flex-direction:column; min-width:0; }
.page-footer { margin-top:auto; }
.site-footer { padding-bottom:calc(25px + env(safe-area-inset-bottom, 0px)); }
@media (max-width:820px) {
  /* A fixed, filtered full-screen grain layer can leave unpainted tiles on mobile.
     Keep the existing section artwork, but remove that extra compositor layer. */
  body::after { content:none; }
  .contact { min-height:0; }
  .contact-row { margin-bottom:72px; }
  .page-footer { padding-top:56px; }
}
@media (max-width:365px) {
  /* Long non-breaking editorial phrases must not widen a narrow mobile viewport. */
  .image-sentence .phrase { white-space:normal; }
}