/* Consistent vector icons on iOS and desktop. */
.icon-definitions { position: absolute; overflow: hidden; pointer-events: none; }
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -.12em;
  fill: none;
}
.brand-star { color: var(--orange); }
.ticker i { display: flex; align-items: center; }
.kinary-symbol { display: flex; align-items: center; }
.motion-icon { display: inline-flex; align-items: center; }
.sculpture-fallback .icon { filter: drop-shadow(10px 15px 0 #b83c1b); }
.project-scene { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media(max-width:760px) {
  /* Reserve a clear band below the Kinary interface for its caption. */
  .kinary-scene { height: 440px; }
  .kinary-brand { top: 65px; }
  .care-window {
    top: 143px;
    left: 11%;
    width: 80%;
    transform: rotate(-6deg) scale(.88);
    transform-origin: center top;
  }
  .project-scene:hover .care-window { transform: rotate(-3deg) scale(.88); }
  .hero-top, .hero-copy .eyebrow,
  .section-kicker, .hero-foot, .art-bottom > .mono,
  .about-left > p, .work-note { font-size: 9px; }
  .hero-top { line-height: 1.5; }
  .hero-foot { line-height: 1.5; align-items: center; }
  .hero-foot > span:first-child { max-width: 53%; }
  .hero-foot a { text-align: right; }
  .hero-copy .eyebrow { letter-spacing: .02em; }
  .last-line br { display: initial; }
  .scene-top { font-size: 9px; flex-wrap: wrap; row-gap: 6px; }
  .scene-top > span:last-child { font-size: 8px; }
  .scene-caption { font-size: 9px; right: 66px; line-height: 1.5; }
  .project-category { font-size: 8px; max-width: 93px; }
  .project-info { gap: 14px; }
  .project-info p { font-size: 12px; line-height: 1.5; }
  .about-left { gap: 24px; }
  .about-left > p { line-height: 1.8; }
  .nav-contact, .motion-toggle { min-height: 44px; }
  .motion-toggle { min-width: 36px; justify-content: center; }
  .remix-button { min-height: 44px; }
  .project-open { width: 40px; height: 40px; }
}
@media(max-width:370px) {
  .kinary-scene { height: 410px; }
  .kinary-brand { top: 67px; }
  .care-window { top: 137px; left: 7%; width: 88%; transform: rotate(-5deg) scale(.82); }
  .project-scene:hover .care-window { transform: rotate(-2deg) scale(.82); }
  .hero-copy .eyebrow { font-size: 8px; }
  .hero-foot { font-size: 8px; }
  .scene-top { font-size: 8px; }
  .scene-top > span:last-child { font-size: 7px; }
  .project-category { font-size: 7px; max-width: 73px; }
  .about-left > p { font-size: 8px; }
}